css3 - 样式盒子模型（盒子装饰，阴影、圆角以及边框）

最新推荐文章于 2023-04-29 18:49:36 发布

暗恋花香

最新推荐文章于 2023-04-29 18:49:36 发布

阅读量403

点赞数 1

分类专栏： # CSS/CSS3 文章标签： css3

本文链接：https://blog.csdn.net/qq_42324086/article/details/100894569

版权

CSS/CSS3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

边框颜色

强调同时设置4个边框颜色时，顺序为上右下左

边框粗细

边框样式

border-style

border简写

margin 属性

padding属性

盒子型模

border-radius 圆角边框

取值：px | em | rem | 百分比……

设置给：块、行内块、行内元素

作用：设置元素边框的圆角


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            background-color: #eee7e1;
        }
        div{
            width: 260px;
            height: 315px;
            background-color: white;
        }
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        h1{
            font: bold 14px/35px "微软雅黑";
            background-color: #e9185a;
            padding-left: 10px;
            color: white;
        }
        div ul li{
            border-bottom: 1px dotted #666;
        }
        a{
            color: #666666;
            font: 12px/30px "微软雅黑";
            text-decoration: none;
        }
        a:hover{
            color: #e9185a;
        }
        div a span{
            display: inline-block;
            color: white;
            background-color: #373b3c;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            text-align: center;
            line-height: 20px;
            font-weight: bold;
            margin-right: 10px;
        }
        div a:hover span{
          background-color: #e9185a;
        }
    </style>
</head>
<body>
   <!--  <div>
        <dl>
            <dt>大家都喜欢买的美容品</dt>
            <dl>雅诗兰黛即时修护眼部精华霜15ml</dl>
        </dl>
    </div> -->
    <div>
        <h1>大家都喜欢买的美容品</h1>
        <ul>
            <li><a href=""><span>1</span>雅诗兰黛即时修护眼部精华霜15ml</a></li>
            <li><a href=""><span>2</span>雅诗兰黛即时修护眼部精华霜15ml</a></li>
            <li><a href=""><span>3</span>雅诗兰黛即时修护眼部精华霜15ml</a></li>
            <li><a href=""><span>4</span>雅诗兰黛即时修护眼部精华霜15ml</a></li>
            <li><a href=""><span>5</span>雅诗兰黛即时修护眼部精华霜15ml</a></li>
            <li><a href=""><span>6</span>雅诗兰黛即时修护眼部精华霜15ml</a></li>
        </ul>
    </div>
</body>
</html>

盒子阴影

  /* =======================================================================
            box-shadow:0px 0px 1px #000
            第1个值为0时，代表左右边框阴影 为1px范围
            第1个值为正整数 代表 左边框阴影
            第1个值为负整数 代表 右边框阴影

            同理
            第2个值为0 代表上下边框阴影
            第2个值为正整数 代表1px阴影距离上边框多少
            第1个值为负整数 代表下边框阴影设置

            box-shadow:12px 12px 12px 12px black; /*水平偏移量、垂直偏移量、阴影模糊度、影子大小、颜色
        
         */

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>爱奇异视频播放列表</title>
    <style>
        li {
            display: inline-block;
        }

        li h4:nth-of-type(1) {
            font-size: 16px;
            color: #4d4d4d;
        }

        li p:nth-of-type(1) {
            color: #640000;
            font-size: 14px;

        }

        li p:nth-of-type(2) {
            font-size: 12px;
            color: blue;
        }
        /* =======================================================================
            box-shadow:0px 0px 1px #000
            第1个值为0时，代表左右边框阴影 为1px范围
            第1个值为正整数 代表 左边框阴影
            第1个值为负整数 代表 右边框阴影

            同理
            第2个值为0 代表上下边框阴影
            第2个值为正整数 代表1px阴影距离上边框多少
            第1个值为负整数 代表下边框阴影设置

            box-shadow:12px 12px 12px 12px black; /*水平偏移量、垂直偏移量、阴影模糊度、影子大小、颜色
        
         */
        ul li:hover {
            border-radius: 10px;
            box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1), 0 0 10px 0 rgba(0, 0, 0, 0.2);
        }
        img{
            border-radius: 10px;
        }
        *{
            margin: 0;
            padding: 0;
        }
        h3{
           font-size: 18px;
           line-height: 40px; 
        }
        ul li{
            padding: 10px;
            margin-right: 5px;
        }
        body{
            width: 1000px;
            margin: auto;
        }
    </style>
</head>

<body>
    <h3>热播</h3>
    <ul>
        <li>
            <img src="image/img1.png" alt="" />
            <h4>神武赵子龙</h4>
            <p>怒，林更新不抱网红抱女神</p>
            <p>点击次数：242445次</p>
        </li>
        <li>
            <img src="image/img2.png" alt="" />
            <h4>旋风十一人</h4>
            <p>胡歌变教练在撩前女友</p>
            <p>点击次数：242445次</p>

        </li>
        <li>
            <img src="image/img3.png" alt="" />
            <h4>太阳的后裔</h4>
            <p>宋慧乔吃嫩草</p>
            <p>点击次数：242445次</p>

        </li>
        <li>
            <img src="image/img4.png" alt="" />
            <h4>山海经之赤影传说</h4>
            <p>娜扎张翰再度联手</p>
            <p>点击次数：242445次</p>

        </li>
    </ul>
</body>

</html>

总结

暗恋花香

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
css3 - 样式盒子模型（盒子装饰，阴影、圆角以及边框）

边框颜色强调同时设置4个边框颜色时，顺序为上右下左边框粗细边框样式border-styleborder简写margin 属性padding属性盒子型模border-radius 圆角边框取值：px | em | rem | 百分比……设置给：块、行内块、行内元素作用：设置元素边框的圆角...
复制链接

扫一扫