边框阴影
Posted lujieting
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了边框阴影相关的知识，希望对你有一定的参考价值。
<style>
*{
padding: 0;
margin: 0;
}
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
img {
width: 100%;
display: block;
}
.items {
padding: 30px;
overflow: hidden;
}
.item {
width: 200px;
height: 200px;
padding-bottom: 100px;
margin-right: 30px;
border: 1px solid #CCC;
background-color: #FFF;
float: left;
}
/* div{
width: 200px;
height: 200px;
margin:100px auto;
!*添加边框阴影*!
box-shadow: -10px 10px 5px 0px rgba(0,0,150,0.2) inset,10px -10px 5px 0px rgba(0,0,150,0.2) inset;
}*/
/*需求：为前面四个图片盒子添加右下角的外阴影，为最后个盒子添加四个方向的内阴影*/
.item:nth-of-type(-n+4){
box-shadow: 3px 3px 3px #ccc;
}
.item:last-of-type{
box-shadow: 3px 3px 3px #ccc inset,-3px -3px 3px #ccc inset;
}
</style>
</head>
<body>
<!--文本阴影：text-shadow:offsetX offsetY blur color-->
<!--边框阴影：box-shadow:h v blur spread color inset
h:水平方向的偏移值
v:垂直方向的偏移值
blur:模糊--可选，默认0
spread:阴影的尺寸，扩展和收缩阴影的大小--可选 默认0
color:颜色--可选，默认黑色
inset:内阴影--可选,默认是外阴影-->
<!--<div></div>-->
<div class="items">
<div class="item">
<img src="images/images/pic_1.jpg">
</div>
<div class="item">
<img src="images/images/pic_2.jpg">
</div>
<div class="item">
<img src="images/images/pic_3.jpg">
</div>
<div class="item">
<img src="images/images/pic_4.jpg">
</div>
<div class="item"></div>
</div>
以上是关于边框阴影的主要内容，如果未能解决你的问题，请参考以下文章