Web全栈工程师之路(二)——CSS篇(四)——布局——盒子模型的尺寸、轮廓、阴影与圆角

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS3初识(三)布局——盒子模型的尺寸、轮廓、阴影与圆角</title>
    <style>
        *{
            /*在通配符里将默认样式清空(不完整)*/
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: #666666;
            border: 5px solid red;
            padding: 10px;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: orange;
            outline: 5px solid blue;
            padding: 10px;
            box-shadow: 20px 20px 10px #666666;
            border-radius: 5px 10px 20px;
        }
        /*
            默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定
            box-sizing(尺寸属性)：用来设置盒子尺寸的计算方式(设置width和height的作用)
                可选值：
                    content-box：默认值，宽度和高度用来设置内容区的大小
                    border-box：宽度和高度用来设置整个盒子的可见框的大小

            outline(轮廓属性)：类似border，但不影响可见框大小，只是在外部加了一个边框，可能会遮挡到周围的元素
                相当于在周围设置一圈轮廓线

            box-shadow(阴影属性)：
                属性值：
                    (右侧偏移量)px (下侧偏移量)px (阴影虚化半径)px 颜色(顺序可调整)
                注意：阴影不会影响布局

            border-radius(圆角属性)：
                属性值：
                    (左上角半径)px (右上角半径)px (右下角半径)px (左下角半径)px
                    (所有圆角的半径)px
                    (左上、右下角的半径)px (右上、左下角的半径)px
                    (横向边)px / (纵向边)px 椭圆变换
                    百分比% (50%为圆形)

                border-top-left-radius：设置左上角的圆角 px
                border-top-right-radius：设置右上角的圆角 px
                border-bottom-left-radius：设置左下角的圆角 px
                border-bottom-right-radius：设置右下角的圆角 px
                以上四个单独圆角的椭圆设置：(横向边)px (纵向边)px

          */

    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <p>这里的文字没有被阴影挡住</p>

</body>
</html>
Web全栈工程师之路(二)——CSS篇(四)——布局——盒子模型的尺寸、轮廓、阴影与圆角

相关推荐
