box-shadow border透明边框按钮

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="border-opacity1"></div>
  <div class="border-opacity2"></div>
  <span class="button">OK</span>
  <div class="box-shadow-base box-shadow-top"></div>
  <div class="box-shadow-base box-shadow-right"></div>
  <div class="box-shadow-base box-shadow-bottom"></div>
  <div class="box-shadow-base box-shadow-left"></div>
  <div class="box-shadow-base box-shadow-multiple"></div>
</body>
</html>

div{
  width:100px;
  height:100px;
}

.border-opacity1{
  border:10px solid hsla(182, 44%, 76%, .5); ;
  background:red;
  background-clip:border-box; /*默认 被边框的外边距裁剪*/
}
.border-opacity2{
  border:10px solid hsla(182, 44%, 76%, .5); ;
  background:red;
  background-clip:padding-box; /* 被内边距的外沿裁剪 */
  margin-top:10px;
}
.button{
  display:inline-block;
  margin-top:10px;
  padding:.3em .8em;
  border:1px solid rgba(0,0,0,.1);
  border-radius:.2em;
  box-shadow:0 .05em .25em rgba(0,0,0,.5);
  text-shadow:0 -.05em .05em rgba(0,0,0,.5);
  font-size:125%;
  color:#fff;
  line-height:1.5;
  background:#6b0;
}
/* 阴影尺寸负值为缩小阴影区域，正值为放大阴影区域（x，y轴同时作用） */
.box-shadow-base{
  margin-top:20px;
  border:1px solid #ccc;
}
.box-shadow-top{
  box-shadow:0 -2px 0 -1px deeppink;
}
.box-shadow-right{
  box-shadow:2px 0 0 -1px deeppink;
}
.box-shadow-bottom{
  box-shadow:0 2px 0 -1px deeppink;
}
.box-shadow-left{
  box-shadow:-2px 0 0 -1px deeppink;
}
.box-shadow-multiple{
  margin:0 auto;
  box-shadow:0 0 0 5px deeppink,
             0 0 0 10px green,
             0 0 0 15px yellow;
}
/* box-shadow是层层叠加的,第一层投影位于最顶层，以此类推 */

这里写图片描述

box-shadow border透明边框 按钮

猜你喜欢

box-shadow border透明边框按钮