可以通过边框风格属性border-style设定上下左右边框的风格,该属性用于设置一个元素边框的样式,而且必须用于指定可见的边框。可以使用1到4个关键字,如果四个值都给出了,它们分别用于上、右、下和左边框的样式
如果给出一个值,它将被运用到各边上。
如果两个或三个值给出了,省略了的值与对边相等
也可以分别使用border-top-style、border-bottom-style、border-left-style、border-right-style属性单独设置各边的风格
各边的风格使用的属性值
none:没有边框,无论边框宽度设置为多大
dotted:点线式边框
dashed:破折线式边框
solid:直线式边框
double:双线式边框
groove:槽线式边框
ridge:脊线式边框
inset:内嵌效果的边框
outset:突起效果的边框
1 <!-- 2 可以通过边框风格属性border-style设定上下左右边框的风格,该属性用于设置一个元素边框的样式,而且必须用于指定可见的边框。可以使用1到4个关键字,如果四个值都给出了,它们分别用于上、右、下和左边框的样式 3 4 如果给出一个值,它将被运用到各边上。 5 6 如果两个或三个值给出了,省略了的值与对边相等 7 8 也可以分别使用border-top-style、border-bottom-style、border-left-style、border-right-style属性单独设置各边的风格 9 10 11 各边的风格使用的属性值 12 none:没有边框,无论边框宽度设置为多大 13 dotted:点线式边框 14 dashed:破折线式边框 15 solid:直线式边框 16 double:双线式边框 17 groove:槽线式边框 18 ridge:脊线式边框 19 inset:内嵌效果的边框 20 outset:突起效果的边框 21 --> 22 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 23 <html xmlns="http://www.w3.org/1999/xhtml"> 24 <head> 25 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 26 <title>边框风格属性</title> 27 <style> 28 h1{ 29 border-style:solid; 30 border-width:10px 20px 30px 40px; 31 border-color:red blue yellow green; 32 } 33 h2{ 34 border-style:double solid inset dotted; 35 } 36 h3{ 37 border-top-style:solid; 38 border-bottom-style:outset; 39 } 40 </style> 41 </head> 42 43 <body> 44 <h1>wwwwwwwwwwwwwwwww</h1> 45 <h2>wwwwwwwwwwwwwwwww</h2> 46 <h3>wwwwwwwwwwwwwwwww</h3> 47 </body> 48 </html>