<!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;
}
.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;
}