box-shade以及border-radius這些css3屬性大家肯定不陌生，在此為那些對於box-shade和border-radius還不太熟悉的小白提出一些值得注意的地方，這些值得注意的地方在大家使用過程中肯定遇到過。好了，話不多說，直接正題。

為什麼會把這兩個拿在一起說，後面會講到。

先說box-shade：

X-offset:陰影水平偏移量，其值可以是正負值。如果值為正值，則陰影在物件的右邊，其值為負值時，陰影在物件的左邊；

Y-offset:陰影垂直偏移量，其值也可以是正負值。如果為正值，陰影在物件的底部，其值為負值時，陰影在物件的頂部；

陰影半徑：此引數可選，但其值只能是為正值，如果其值為0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；

陰影尺寸：此引數可選，其值可以是正負值，如果值為正，則整個陰影都延展擴大，反之值為負值時，則縮小；

再來說說border-radius：

.row{
margin: 200px auto;
}
.box{
border-radius: 50%;
border: 1px solid #f00;
text-align: center;
overflow: hidden;
box-shadow: inset 0 0 20px rgba(255,255,255,0.6);
}
.box img{
max-width: 100%;
border-radius: 50%;
vertical-align: middle;
}
<div class="row">
<div class="col-md-4">
<div class="box">
<img src="img/psb.jpg"/>
</div>
</div>
<div class="col-md-4">
<div class="box">
<img src="img/psb.jpg"/>
</div>
</div>
<div class="col-md-4">
<div class="box">
<img src="img/psb.jpg"/>
</div>
</div>
</div>
 

會發現不給具體寬高的元素使用border-radius無效，而且box-shade也無法顯示出來（被圖片擋住）。因為需要響應

式（不使用媒體查詢的情況下）給具體高度不能達到響應式該有的效果。

那該怎麼又能實現響應式又能讓border-radius和box-shade都生效呢！那就給具體寬高，使border-radius生效；使用

媒體查詢實現響應式。

.row{
margin: 200px auto;
}
.col-md-4{
position: relative;
}
.box{
border-radius: 50%;
border: 1px solid #f00;
text-align: center;
overflow: hidden;
box-shadow: inset 0 0 50px rgba(255,255,255,0.6);
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
img{
max-width: 100%;
border-radius: 50%;
vertical-align: middle;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
@media only screen and (min-width: 992px){
.box,img{
width: 300px;
height: 300px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.box,img{
width: 495px;
height: 495px;
}
}

<div class="row">
<div class="col-md-4 col-sm-6">
<div class="box">

</div>
<img src="img/psb.jpg"/>
</div>
<div class="col-md-4 col-sm-6">
<div class="box">

</div>
<img src="img/psb.jpg"/>
</div>
<div class="col-md-4 col-sm-6">
<div class="box">

</div>
<img src="img/psb.jpg"/>
</div>
</div>

效果圖：

這樣就達到了想要達到的效果，使用定位和層級是為了實現box-shade；給具體寬高是實現border-radius；使用媒體查詢實現響應式。值得注意的是，層級需要和定位一起使用才會生效，而且需要在同一級之間使用層級。