最新的Web开发教程
 

CSS边界

❮上一页 下一章❯

CSS边框属性

CSS的border属性允许你指定样式，宽度和元素边框的颜色。

该元素具有一个槽的边界是15像素宽和绿色。

边框样式

在border-style属性指定什么样的边框显示。

下面的值是允许的：

  • dotted -定义虚线边框
  • dashed -定义虚线边框
  • solid -定义了坚实的边界
  • double -定义了一个双边框
  • groove -定义3D凹槽的边框。 效果依赖于边框颜色值
  • ridge -定义了一个三维脊边框。 效果依赖于边框颜色值
  • inset -定义3D插图边框。 效果依赖于边框颜色值
  • outset - 3D突出边框。 效果依赖于边框颜色值
  • none -不定义任何边界
  • hidden -定义了一个隐藏的边界

在border-style属性可以有一到四个值（在顶部边框，右边框，下边框和左边框）。

例

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

结果：

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

No border.

A hidden border.

A mixed border.

试一试»
注意注意：除非下面介绍的其他CSS边框属性都不会产生任何影响border-style属性设置！

边框宽度

在border-width属性指定的四个边框的宽度。

的宽度可以设置为一个特定大小（以px, pt, cm, em等）或通过使用三个预定义值之一：薄，中等或厚。

在border-width属性可以有一到四个值（在顶部边框，右边框，下边框和左边框）。

例

p.one {
    border-style: solid;
    border-width: 5px;
}

p.two {
    border-style: solid;
    border-width: medium;
}

p.three {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}
试一试»

边框颜色

所述border-color属性被用于设置四个边框的颜色。

颜色可以通过设置为：

  • name -指定颜色的名称，如"red"
  • Hex -指定一个十六进制值，如"#ff0000"
  • RGB -指定RGB值，如"rgb(255,0,0)"
  • transparent

所述border-color属性可以具有从一到四个值（上边界，右边界，下边框，和左边框）。

如果border-color没有设置，它继承了元素的颜色。

例

p.one {
    border-style: solid;
    border-color: red;
}

p.two {
    border-style: solid;
    border-color: green;
}

p.three {
    border-style: solid;
    border-color: red green blue yellow;
}
试一试»

边界 - 各个边

从你上面的例子已经看到，有可能指定不同的边界为每个边。

在CSS中，也有用于指定每个边界（上，右，下，左）的属性：

例

p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}
试一试»

上面的例子给出了相同的结果，因为这：

例

p {
    border-style: dotted solid;
}
试一试»

所以，这里是它如何工作的：

如果border-style属性有四个值：

  • border-style ：虚线实线虚线两倍;
    • 顶部边框点缀
    • 右边框是实
    • 下边框是双
    • 左边框为虚线

如果border-style属性有三个值：

  • border-style ：虚线实双;
    • 顶部边框点缀
    • 左右边框是实
    • 下边框是双

如果border-style属性有两个值：

  • border-style ：虚线实线;
    • 顶部和底部边框点缀
    • 左右边框是实

如果border-style属性有一个值：

  • border-style ：星罗棋布;
    • 所有四个边框点缀

的border-style属性在上面的例子中使用。 然而，它也可以与border-width和border-color 。

边框 - 速记属性

正如你可以从上面的例子看到，有许多属性与边框处理时要考虑的。

为了缩短代码，但也可以在一个属性来指定所有的单个边界特性。

该border属性是以下各个边框属性的速记属性：

  • border-width
  • border-style （必填）
  • border-color

例

p {
    border: 5px solid red;
}
试一试»
例子

更多示例

所有在一个声明顶部边框属性
这个例子演示了在一个声明中设置的所有属性的上边框的简写属性。

设置在底边框的样式
这个例子演示了如何设置在底边框的样式。

设置左边框的宽度
这个例子演示了如何设置左边框的宽度。

设置四个边框的颜色
这个例子演示了如何设置四个边框的颜色。 它可以有一至四个颜色。

设置右边框的颜色
这个例子演示了如何设置右边框的颜色。

自测练习用！

练习1» 练习2» 练习3» 练习4»

所有的CSS边框属性

属性 描述
border 设置在一个声明中所有的边框属性
border-bottom 设置在一个声明中所有的底部边框属性
border-bottom-color 设置底边框的颜色
border-bottom-style 设置底边框的样式
border-bottom-width 设置底边框的宽度
border-color 设置四个边框的颜色
border-left 设置在一个声明中所有的左边框属性
border-left-color 设置左边框的颜色
border-left-style 设置左边框的样式
border-left-width 设置左边框的宽度
border-right 设置在一个声明中所有的右边框属性
border-right-color 设置右边框的颜色
border-right-style 设置右边框的样式
border-right-width 设置右边框的宽度
border-style 设置四个边框的样式
border-top 设置在一个声明中所有的顶级边框属性
border-top-color 设置上边框的颜色
border-top-style 设置上边框的风格
border-top-width 设置上边框的宽度
border-width 设置四个边框的宽度

❮上一页 下一章❯