box-shadow border透明边框 按钮

来源:转载






JS Bin
border-opacity1">OK
box-shadow-base box-shadow-top">
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是层层叠加的,第一层投影位于最顶层,以此类推 */





分享给朋友:
您可能感兴趣的文章:
随机阅读: