css之边框

最新推荐文章于 2022-10-11 17:47:51 发布

原创最新推荐文章于 2022-10-11 17:47:51 发布 · 417 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文详细介绍了如何使用CSS设置HTML元素的边框样式，包括边框样式、宽度及颜色等属性，并通过具体示例展示了如何为二级标题h2设置带有不同宽度的红色虚线边框。

边框可以应用到在主体元素body中的绝大部分HTML元素中。

创建一个包围着元素的边框，你所需要的是边框样式border-style。它们的值可以是 solid、dotted、dashed、double、groove、ridge、 inset和outset。（你有必要每个值都试一试，看看效果如何——译者注）

边框宽度border-width为边框设置宽度，通常用像素来表示。当然，还可以单独设置四个方向的边框属性，它们是border-top-width、border-right-width、 border-bottom-width和border-left-width。

最后，边框颜色border-color设置颜色。

为下面的CSS文档添加如下代码：

h2 { border-style: dashed; border-width: 3px; border-left-width: 10px; border-right-width: 10px; border-color: red; }

这将会使所有的HTML二级标题（h2）产生红色的破折号（dashed）边框，上下各3像素宽，左右则各10像素宽（取代了3像素宽的全局设置）。