HTML中光移动边框,CSS 边框各边

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

CSS 边框 - 单独的边

从上一章的例子中，您已经看到可以为每一侧指定不同的边框。

在 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: dotted solid double dashed;

上边框是虚线

右边框是实线

下边框是双线

左边框是虚线

如果 border-style 属性设置三个值：

border-style: dotted solid double;

上边框是虚线

右和左边框是实线

下边框是双线

如果 border-style 属性设置两个值：

border-style: dotted solid;

上和下边框是虚线

右和左边框是实线

如果 border-style 属性设置一个值：

border-style: dotted;

四条边均为虚线

实例/* 四个值 */p { border-style: dotted solid double dashed; }/* 三个值 */p { border-style: dotted solid double; }/* 两个值 */p { border-style: dotted solid; }/* 一个值 */p { border-style: dotted; }

亲自试一试

上例中使用的是 border-style 属性。但 border-width 和 border-color 也同样适用。