Web前端-11-css-边框属性

最新推荐文章于 2024-08-12 09:00:00 发布

karry_孙二

最新推荐文章于 2024-08-12 09:00:00 发布

阅读量1.5k

点赞数 2

分类专栏： Web前端基础

本文链接：https://blog.csdn.net/qq_39620483/article/details/84193421

版权

Web前端基础专栏收录该内容

29 篇文章 1 订阅

订阅专栏

css边框属性

1.border属性

（1）border:复合属性,设置对象边框的特性, 如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置

（2）例如：border:1px solid red;

设置或检索对象边框宽度

设置或检索对象边框样式

设置或检索对象边框颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 边框属性</title>
    <style type="text/css">
        div,span{
            width: 200px;
            height: 200px;
            background-color: red;
            border:2px solid green;<!-- 线的粗细、形状、颜色 -->
        }
    </style>
</head>
<body>
    <div>
        这是一个块元素
    </div><br>
    <span>
        这是一个行元素
    </span>
</body>
</html>

2.border-color属性

（1）border-color: 设置或检索对象的边框颜色。

①如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。

②如果只提供一个，将用于全部的四边。

③如果提供两个，第一个用于上、下，第二个用于左、右。

④如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。

3.border-style属性

（1）border-style:设置或检索对象的边框样式。

①如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。

②如果只提供一个，将用于全部的四边。

③如果提供两个，第一个用于上、下，第二个用于左、右。

④如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。