CSS 边框（border）

CSS 边框

在网页设计里，CSS 边框属性用于定义元素边框的样式、宽度、颜色和边框圆角。

在本章节中，你将学习如下 CSS 边框属性：

• border-style：设置边框样式
• border-width：设置边框宽度
• border-color：设置边框颜色
• border-radius：设置边框圆角
• border-top：上边框简写属性，同理还有border-left、border-right、border-bottom

CSS 边框样式

border-style属性指定显示的边框类型，语法结构：border-style:solid;。

border-style属性支持的属性值有：

• solid：最常用，定义实线边框（默认样式）。
• none：无边框（常用于重置默认边框）。
• dashed：定义虚线边框。
• dotted：定义点线边框。
• double：定义双实线边框。
• groove：定义 3D 凹槽边框，效果取决于边框颜色。
• ridge：定义 3D 脊线边框，效果取决于边框颜色。
• inset：定义 3D 内嵌边框，元素呈现凹陷效果。
• outset：定义 3D 外凸边框，元素呈现凸起效果。
• hidden：隐藏边框（与 none 类似，但在表格中会影响边框折叠）。

CSS 边框样式实例：

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

CSS 边框样式演示效果：

最常用，定义实线边框（默认样式）。

无边框（常用于重置默认边框）。

定义虚线边框。

定义点线边框。

定义双实线边框。

定义 3D 凹槽边框，效果取决于边框颜色。

定义 3D 脊线边框，效果取决于边框颜色。

定义 3D 内嵌边框，元素呈现凹陷效果。

定义 3D 外凸边框，元素呈现凸起效果。

隐藏边框（与 none 类似，但在表格中会影响边框折叠）。

每个边框样式自定义

CSS 边框宽度

border-width属性指定显示的边框宽度，语法结构：background-width:5px;。

在下面的实例中，通过使用border-width属性，来设定边框宽度：

p.width-1 {border-width: 1px;}
p.width-2 {border-width: 2px;}
p.width-5 {border-width: 5px;}
p.width-10 {border-width: 10px;}

CSS 边框宽度演示效果：

border-width:1px;

border-width:2px;

border-width:5px;

border-width:10px;

CSS 边框颜色

border-color属性显示的边框颜色，语法结构：border-color:#ff0000;。

在下面的实例中，通过使用border-color属性，来设定边框颜色：

p.red {border-color: #ff0000;}
p.green {border-color: #00ff00;}
p.blue {border-color: #0000ff;}

CSS 边框颜色演示效果：

border-color:#ff0000;

border-color:#00ff00;

border-color:#0000ff;

CSS 边框圆角

border-radius属性指定显示的边框圆角弧度，语法结构：border-radius:6px;。

在下面的实例中，通过使用border-radius属性，来设定边框圆角弧度：

p.radius-3 {border-radius: 3px;}
p.radius-6 {border-radius: 6px;}
p.radius-12 {border-radius: 12px;}

CSS 边框圆角演示效果：

border-radius:3px;

border-radius:6px;

border-radius:12px;

CSS 边框简写

border属性指定显示的边框圆角弧度，语法结构：border:solid 2px #0000ff;。

在下面的实例中，通过使用border属性，来设定边框样式、宽度、颜色：

p.border-1 {border: solid 2px #0000ff;}
p.radius-2 {border: dashed 2px #ff0000;}

CSS 边框属性简写演示效果：

border: solid 2px #0000ff;

border: dashed 2px #ff0000;