css 常用边框属性

概览

参数	释义
border	u设置边框属性（可以多个）
border-color	边框颜色
border-style	边框样式 solid 实线，dotted 点状线，dashed 虚线
border-width	边框粗细
border-left-color	左边框颜色（上下左右均可单独设置）
border-left-style	左边框样式（上下左右均可单独设置）
border-left-width	左边框高度（上下左右均可单独设置）
border-radius	圆角处理
box-shadow	必写参数：x 轴偏移，y 轴偏移，x 与 y 均接受负值非必写参数：模糊度，扩散程度，阴影颜色，内阴影设置

举例
html 部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>>
        <link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
    </head>

    <body>
        <div class="box1">
            <p>
                1234567890 <br>
                1234567890 <br>
                1234567890 <br>
            </p>
        </div>
        <div class="box2">
            <p>
                abcdefghijklmnopqrstuvwxyz <br>
                abcdefghijklmnopqrstuvwxyz <br>
                abcdefghijklmnopqrstuvwxyz <br>
            </p>
            
        </div>
        <div class="box3">
            <p>
                一二三四五六七八九十 <br>
                一二三四五六七八九十 <br>
                一二三四五六七八九十 <br>
            </p>
        </div>
    </body>
</html>

css 部分

*{
    width: 80%;
    height: 100px;
}
.box1{
    border: 3px solid black;            /* 多个属性设置：3px 实线 黑色 */             
    border-radius: 20px;                /* 圆角 */
    box-shadow: 10px 10px 5px #888888;
    margin-bottom: 15px;                /* 设置间距，具体见之后的随笔 */
}
.box2{
    border-width: 3px;                  /* 单个属性设置 */
    border-style: dotted;               /* 点状线 */
    border-top-color: red; 
    border-bottom-color: blue;
    border-left-color: orange;
    border-right-color: yellow;
    border-radius: 15% 50px;           /* 左下右下为 15% 右上左下为 50px */
    margin-bottom: 15px;
}
.box3{
    border-left-width: 3px;
    border-left-style: dashed;          /* 虚线 */
    border-right: 6px solid;            /* 两个属性设置 */
    border-radius: 15px 30px 45px 60px; /* 左上为起点，顺时针走 */
}

效果截图

[Web 前端] 010 css 常用的边框设置

css 常用边框属性

猜你喜欢