可以通过边框风格属性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>
支付宝扫一扫
微信扫一扫
最新评论