当前阅读教程:CSS入门到精通 > 边框样式 border-style | |||||||||||||||||||||||||||||||||
阅读(22555525) 收藏 赞(5685) 分享 | |||||||||||||||||||||||||||||||||
上一篇: CSS Border(边框) | 下一篇: 边框宽度 border-width | ||||||||||||||||||||||||||||||||
浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。 属性定义及使用说明border-style属性设置一个元素的四个边框的样式。此属性可以有一到四个值。 示例border-style:dotted solid double dashed; n 上边框是点状 n 右边框是实线 n 下边框是双线 n 左边框是虚线 border-style:dotted solid double; n 上边框是点状 n 右边框和左边框是实线 n 下边框是双线 border-style:dotted solid; n 上边框和下边框是点状 n 右边框和左边框是实线 border-style:dotted; n 所有4个边框都是点状
属性值
实例代码<!doctype html> <html> <head> <meta charset="utf-8"> <title>边框样式 border-style</title> <!--定义内部样式--> <style> p { border: red solid thin;/*边框*/ } .dotted { outline-style: dotted;/*定义点状边框。在大多数浏览器中呈现为实线。*/ } .dashed { outline-style: dashed;/*定义虚线。在大多数浏览器中呈现为实线。*/ } .solid { outline-style: solid;/*定义实线*/ } .double { outline-style: double;/*定义双线。双线的宽度等于 border-width 的值*/ } .groove { outline-style: groove;/*定义 3D 凹槽边框。其效果取决于 border-color 的值*/ } .ridge { outline-style: ridge;/*定义 3D 垄状边框。其效果取决于 border-color 的值*/ } .inset { outline-style: inset;/*定义 3D inset 边框。其效果取决于 border-color 的值*/ } .outset { outline-style: outset;/*定义 3D outset 边框。其效果取决于 border-color 的值*/ } </style> </head> <body>
<p>A dotted outline:定义点状边框</p> <p>A dashed outline:定义虚线</p> <p>A solid outline:定义实线</p> <p>A double outline:定义双线</p> <p>A groove outline:定义 3D 凹槽边框</p> <p>A ridge outline:定义 3D 垄状边框</p> <p>An inset outline:定义 3D inset 边框</p> <p>An outset outline:定义 3D outset 边框</p>
<p><b>注释:</b>只有在规定了 !DOCTYPE 时,Internet Explorer 8 (以及更高版本) 才支持 outline-style 属性。</p>
</body> </html> 效果图实例2:每边设置不同的边框本例演示如何在元素的各边设置不同的边框 代码<!doctype html> <html> <head> <meta charset="utf-8"> <title>边框样式 border-style 每边设置不同的边框</title> <!--定义内部样式--> <style> /*边框定义顺序是:上,右,下,左*/ .one { border-style:dotted solid dashed double; } .two { border-style:dotted solid dashed; } .three { border-style:dotted solid; } .four { border-style:dotted; } </style> </head> <body>
<p>This is some text in a paragraph.</p> <p>This is some text in a paragraph.</p> <p>This is some text in a paragraph.</p> <p>This is some text in a paragraph.</p>
</body> </html> 效果图 |
|||||||||||||||||||||||||||||||||
上一篇: CSS Border(边框) | 下一篇: 边框宽度 border-width |