yukeka
4/10/2020 - 8:20 AM

ボックスの周りに半透明のボーダーをつける

ボックスの周りに半透明のボーダーをつける

ボックスの周りに半透明のボーダーをつける

A Pen by yukeka on CodePen.

License.

<div class="bg-img">
  <h1>SHOP INFO</h1>
</div>
* {
  box-sizing: border-box;
}

.bg-img {
   position: relative;
   width: 100%;
   height: 500px;
   background-image: url(https://cdn.pixabay.com/photo/2016/03/09/09/22/workplace-1245776_640.jpg);
   background-size: cover;
   background-position: center;
}

h1 {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   margin: auto;
   width: 400px;
   height: 252px;
   padding: 80px 0;
   text-align: center;
   color: #fff;
   font-size: 3.2rem;
   font-weight: bold;
   background-color: #0c5074;
   background-clip: padding-box;
   border: 30px solid rgba(0,167,255,.6);
}