设置边框样式

border-style属性设置一个元素的四个边框的样式。此属性可以有一到四个值。

示例:

border-style:dotted solid double dashed;

 ●  上边框是点状

 ●  右边框是实线

 ●  下边框是双线

 ●  左边框是虚线

border-style:dotted solid double;

 ●  上边框是点状

 ●  右边框和左边框是实线

 ●  下边框是双线

border-style:dotted solid;

 ●  上边框和下边框是点状

 ●  右边框和左边框是实线

border-style:dotted;

 ●  所有4个边框都是点状

可以设置的属性值:

none:定义无边框。    

hidden:与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。    

dotted:定义点状边框。在大多数浏览器中呈现为实线。

dashed:定义虚线。在大多数浏览器中呈现为实线。

solid:定义实线。

double:定义双线。双线的宽度等于 border-width 的值。

groove:定义 3D 凹槽边框。其效果取决于 border-color 的值。

ridge:定义 3D 垄状边框。其效果取决于 border-color 的值。

inset:定义 3D inset 边框。其效果取决于 border-color 的值。

outset:定义 3D outset 边框。其效果取决于 border-color 的值。

inherit:规定应该从父元素继承边框样式。

Weiter lernen
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>设置边框样式</title> <style> p.none {border-style:none;} 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.hidden {border-style:hidden;} </style> </head> <body> <p class="none">无边框。</p> <p class="dotted">虚线边框。</p> <p class="dashed">虚线边框。</p> <p class="solid">实线边框。</p> <p class="double">双边框。</p> <p class="groove"> 凹槽边框。</p> <p class="ridge">垄状边框。</p> <p class="inset">嵌入边框。</p> <p class="outset">外凸边框。</p> <p class="hidden">隐藏边框。</p> </body> </html>
einreichenCode zurücksetzen