本文摘自PHP中文网,作者青灯夜游,侵删。
border-style属性用于设置元素边框的样式,可以同时为一个元素的四个边框设置样式,或者单独地为各边设置边框样式。只有当该属性的值不是 none 时边框才可能出现。
css border-style属性怎么用?
border-style属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式。它可以有一到四个值,例:
1 2 3 4 | p.one { border-style : dotted dashed solid double ;}
p.two { border-style : dotted solid double ;}
p.three { border-style : dotted solid ;}
p.four { border-style : dotted ;}
|
效果图:

说明:只有当这个值不是 none 时边框才可能出现。
可以设置的属性值:
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:规定应该从父元素继承边框样式。
注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit" 或 "hidden"。
css border-style属性 示例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< 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 >
|
效果图:

以上就是css border-style属性怎么用的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
聊聊css中box-align和box-pack属性的用法
css如何制作饼状图
怎么用css设置字体
css为什么会出现清除浮动的问题
css text-align属性怎么用
10个令人惊叹的非典型css套件
css3跟css区别是什么
用css怎么实现实现宽高比
css如何设置文本颜色
css阴影效果如何实现
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css border-style属性怎么用