作者:广东在线游戏网日期:
返回目录:游戏解答
-webkit-box-shadow:0px 3px 3px #c8c8c8 inset;
-moz-box-shadow:0px 3px 3px #c8c8c8 inset;
box-shadow:0px 3px 3px #c8c8c8 inset;
重点是最后的复inset,不加制的话就zhidao是外阴影
CSS 实现让div的四个边框百都有阴影的效度果:
首先:
HTML代码
<h1>CSS 如何实现知让道div的四个边框都有阴影的效果内?</h1>
<div class="g1">
<div class="g2"></div>
</div>
CSS代码
body{background:#f00;}
html{background:#f00;}/*html加背容景色*/
.g1{
width:500px;
height:500px;
border:2px solid #fff;
margin:30px auto;
background-color:#fff;
box-sizing:border-box;
}
.g2{
width:400px;
height:400px;
margin:50px auto;
border:2px solid #000;
box-shadow:5px 5px 5px #000,5px -5px 5px #000,-5px 5px 5px #000,-5px -5px 5px #000;
}
具体效果:
box-shadow和text-shadow(文字阴影)
设置边框阴影不会影响盒子抄的布局,即不会影响其兄百弟元素的布局
spread可以与blur、度h-shadow、v-shadow相互抵消,blur不可为负值
可以设置多重边框阴影,实问现更好的效果,增强立体感。by三人行答慕课