边框长度样式相同 四个边的颜色不相同 最简单的css书写

133 阅读1分钟

第一步:创建一个html文件
第二步:在body中插入一个div。代码如下
代码如下:

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
</body>
</html>  

第三步:给div设置边框属性,设置宽度和高度,在设置边框样式,使用border-color这个属性可以接受四个属性,用来控制四个边的颜色。
代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
           border-style: solid;
           border-color: red pink green yellow;  
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>