边框阴影

最新推荐文章于 2023-11-09 08:06:00 发布

原创最新推荐文章于 2023-11-09 08:06:00 发布 · 252 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#边框 #阴影

H5C3 专栏收录该内容

52 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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;
            background-color: orange;
            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/pic_1.jpg">
    </div>
    <div class="item">
        <img src="../images/pic_2.jpg">
    </div>
    <div class="item">
        <img src="../images/pic_3.jpg">
    </div>
    <div class="item">
        <img src="../images/pic_4.jpg">
    </div>
    <div class="item"></div>
</div>

</body>
</html>