box-shade和border-radius在定位与未定位对象中的使用

box-shade以及border-radius这些css3属性大家肯定不陌生，在此为那些对于box-shade和border-radius还不太熟悉的小白提出一些值得注意的地方，这些值得注意的地方在大家使用过程中肯定遇到过。好了，话不多说，直接正题。

为什么会把这两个拿在一起说，后面会讲到。

先说box-shade：

    box-shade是css3属性（IE8以上）

使用方法：{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}

inset:定义内外阴影。加上inset表示内阴影；

X-offset:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；

Y-offset:阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；

阴影半径：此参数可选，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

阴影尺寸：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

再来说说border-radius：

   在这我只跟大家讲讲值为50%的情况。

只有定了具体宽高的元素使用border-radius才会生效，大家都应该知道，没有定义具体宽高的元素如果要border-

radius：50%实现一个圆的效果，可以由里面的内容撑开，但是如果需要是响应式的效果该怎么做呢？

大家使用bt3来实现响应式效果，因为有栅格系统所以很容易就能实现，元素不需要定义具体宽度，高度由内容撑开，可以很轻

松显示响应式，如果响应式元素使用到box-shade（inset）和border-radius属性呢。下面通过一个小demo给大家讲解如何办

到。

未定义宽高使用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；使用媒体查询实现响应式。值得注意的是，层级需要和定位一起使用才会生效，而且需要在同一级之间使用层级。