css边框

2024-03-27 18:30:58

# CSS 边框样式

border-style : 边框样式：solid 实线，dashed 虚线，dotted 点线...
border-width : 边框大小
border-color : 边框颜色
border-top : 设置上边框的样式
border-right : 设置右边框的样式
border-bottom : 设置底部边框的样式
border-left : 设置左边框的样式

# CSS 文字样式

font-family : 指定文本的字体系列
font-size : 字体大小
font-weight : 字体粗细： normal 正常，bold 加粗
font-style : 字体样式 : normal 正常，italic 斜体，oblique 设置没有倾斜属性的字体
font-variant : 以小型大写字体或正常字体显示文本
color : 字体颜色

# CSS 背景样式

background-color : 背景颜色
background-image : 背景图片

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html body
        {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .img1 {
            position:absolute;
            z-index: 1;
            width: 300px;
            height: 300px;
            border: 1px dashed  rgb(0, 0, 0);
            left: 50%;
            top: 50%;
            margin-top: -150px;
            margin-left: -150px;
            position: absolute;
        }
        .img2
        {
            position:absolute;
            z-index: 2;
            width: 240px;
            height: 240px;
            border: 1.5px solid  rgb(124, 117, 117);
            left: 50%;
            top: 50%;
            margin-top: -120px;
            margin-left: -120px;
            position: absolute;
        }
        .img3
        {
            position:absolute;
            z-index: 3;
            width: 220px;
            height: 220px;
            background: #A52A2A;
            left: 50%;
            top: 50%;
            margin-top: -110px;
            margin-left: -110px;
            position: absolute;
        }
        .img4
        {
            position:absolute;
            z-index: 4;
            width: 180px;
            height: 180px;
            border: 1px solid #FFFFFF;
            left: 50%;
            top: 50%;
            margin-top: -90px;
            margin-left: -90px;
            position: absolute;
        }
        .img5
        {
            position:absolute;
            z-index: 5;
            width: 170px;
            height: 170px;
            border: 1px solid #FFFFFF;
            left: 50%;
            top: 50%;
            margin-top: -85px;
            margin-left: -85px;
            position: absolute;
        }
        .img6
        {
            position:absolute;
            z-index: 6;
            width: 100px;
            height: 100px;
            border: 2px solid #000000;
            left: 50%;
            top: 50%;
            margin-top: -50px;
            margin-left: -50px;
            position: absolute;
            background: rgb(255, 255, 255);
        }
    </style>
</head>

<body>
    <div class="img1">
        <div class="img2">
            <div class="img3">
                <div class="img4">
                    <div class="img5">
                        <div class="img6">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

效果如下图所示：

码农公寓

相关文章