当前位置:首页 > 教程 > CSS > CSS边框

4.4 CSS简写边框属性

在学习了前面的章节中,边框它有许多属性要写。为了缩减代码,我们可以在一个属性中指定所有单独的边框属性。

border 属性是以下各个边框属性的简写属性:

  • border-width
  • border-style(必需)
  • border-color

例如:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>4.4 CSS简写边框属性</title>
    </head>
    <style>
        p {
            border: 5px solid red;
        }
    </style>
    <body>
        <p>读一本好书,就如同和一个高尚的人在交谈。——歌德</p>
    </body>
</html>

运行后如图:

4.4 CSS简写边框属性

还可以只为一个边指定所有单个边框属性:

左边框

p {
  border-left: 6px solid red;
  background-color: lightgrey;
}

知之者不如好之者,好之者不如乐之者。

下边框

p {
  border-bottom: 6px solid red;
  background-color: lightgrey;
}

知之者不如好之者,好之者不如乐之者。

你觉得文章内容怎么样

阿里云代金券 100 云产品通用

有效期30天 首购用户

立即领取
推荐宝塔面板 0 安全高效的

服务器运维面板

立即领取