个性化阅读
专注于IT技术分析

css边框属性border – CSS教程

点击下载

上一章CSS教程请查看:css填充属性padding

元素的边框围绕着填充和内容。

CSS边框属性

CSS边框属性允许你定义框的边框区域。边框可以是预定义的样式,如实线、双线、虚线等,也可以是图像。以下部分将介绍如何设置定义边框样式(border-style)、颜色(border-color)和边框厚度(border-width)的各种属性。

边框宽度属性

border-width属性指定边界区域的宽度。它是一个简化属性,用于同时设置元素边框的所有四个边的厚度。

p {
    border-width: medium 10px thick 15px;
}

注意:如果border-width属性的值丢失或没有指定,将使用border-width的默认值(medium)。

边框样式属性

border-style属性设置框的边框样式,如:solid, dotted等。它是一个简写属性,用于为元素边框的所有四个边设置行样式。

border-style边框样式的属性可以取以下值之一:none, hidden, dashed, dotted, double, groove, inset, outset, ridge和solid。

  • none: 定义没有边界。
  • hidden: 定义隐藏的边框。
  • dotted: 定义虚线边框
  • dashed: 定义虚线边框
  • solid: 定义实线边框
  • double: 定义两个边框。两个边框的宽度与border-width值相同
  • groove: 定义一个3D凹槽边界。效果取决于边框颜色值
  • ridge: 定义一个三维的脊状边界。效果取决于边框颜色值
  • inset: 定义一个3D inset边框。效果取决于边框颜色值
  • outset: 定义一个3D开始边界。效果取决于边框颜色值
p {
    border-style: dotted;
}

边框颜色属性

border-color属性指定框的边框颜色,这也是设置元素边框的所有四个边的颜色的简写属性。

p {
    border-style: solid;
    border-color: #ff0000;
}

注意:如果单独使用border-color属性,它将不起作用,使用border-style属性首先设置边框。

边框速记属性

border CSS属性是在单个规则中设置一个或多个单独的边框属性border-style、border-width和border-color的简写属性。

p {
    border: 5px solid #ff4500;
}

如果在设置边框简写属性时省略或未指定单个边框属性的值,则将使用该属性的默认值(如果有的话)。

注意:如果在设置一个元素的边框时,border-color属性的值丢失或没有指定(例如:border: 5px solid;),元素的color属性将被用作border-color的值。

在这个例子中,边界将是5px宽度的实线:

p {
    color: black;
    border: 5px solid;
}

但是,在border-style的情况下,省略该值将根本不会显示任何边框,因为border-style属性的默认值是none。

在下面的例子中,没有边界:

p {
    border: 5px #00ff00;
}
赞(0)
未经允许不得转载:srcmini » css边框属性border – CSS教程

评论 抢沙发

评论前必须登录!