html边框绕着图片,CSS边框

CSS 边框

在 HTML 中&＃xff0c;我们使用表格来创建文本周围的边框&＃xff0c;但是通过使用 CSS 边框属性&＃xff0c;我们可以创建出效果出色的边框&＃xff0c;并且可以应用于任何元素。

元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。

每个边框有 3 个方面&＃xff1a;宽度、样式&＃xff0c;以及颜色。在下面的篇幅&＃xff0c;我们会为您详细讲解这三个方面。

边框与背景

CSS 规范指出&＃xff0c;边框绘制在“元素的背景之上”。这很重要&＃xff0c;因为有些边框是“间断的”(例如&＃xff0c;点线边框或虚线框)&＃xff0c;元素的背景应当出现在边框的可见部分之间。

CSS2 指出背景只延伸到内边距&＃xff0c;而不是边框。后来 CSS2.1 进行了更正&＃xff1a;元素的背景是内容、内边距和边框区的背景。大多数浏览器都遵循 CSS2.1 定义&＃xff0c;不过一些较老的浏览器可能会有不同的表现。

边框的样式

样式是边框最重要的一个方面&＃xff0c;这不是因为样式控制着边框的显示(当然&＃xff0c;样式确实控制着边框的显示)&＃xff0c;而是因为如果没有样式&＃xff0c;将根本没有边框。

CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式&＃xff0c;包括 none。

例如&＃xff0c;您可以为把一幅图片的边框定义为 outset&＃xff0c;使之看上去像是“凸起按钮”&＃xff1a;

a:link img {border-style: outset;}

定义多种样式

您可以为一个边框定义多个样式&＃xff0c;例如&＃xff1a;

p.aside {border-style: solid dotted dashed double;}上面这条规则为类名为 aside 的段落定义了四种边框样式&＃xff1a;实线上边框、点线右边框、虚线下边框和一个双线左边框。

我们又看到了这里的值采用了 top-right-bottom-left 的顺序&＃xff0c;讨论用多个值设置不同内边距时也见过这个顺序。

定义单边样式

如果您希望为元素框的某一个边设置边框样式&＃xff0c;而不是设置所有 4 个边的边框样式&＃xff0c;可以使用下面的单边边框样式属性&＃xff1a;

border-top-style

border-right-style

border-bottom-style

border-left-style

因此这两种方法是等价的&＃xff1a;

p {border-style: solid solid solid none;}

p {border-style: solid; border-left-style: none;}

注意&＃xff1a;如果要使用第二种方法&＃xff0c;必须把单边属性放在简写属性之后。因为如果把单边属性放在 border-style 之前&＃xff0c;简写属性的值就会覆盖单边值 none。