边框阴影

<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>
猜你喜欢
