怎么在css中设置div边框样式?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
什么是css
css是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言,并且css样式可以直接存储于HTML网页或者单独的样式单文件中,而样式规则的优先级由css根据这个层次结构决定,从而实现级联效果,发展至今,css不仅能装饰网页,也可以配合各种脚本对于网页进行格式化。
css设置div的边框样式
<!DOCTYPE html><html><head><meta charset="utf-8"><style type="text/css">div {margin: 10px 0;}div.dotted {border-style: dotted}div.dashed {border-style: dashed}div.solid {border-style: solid}div.double {border-style: double}div.groove {border-style: groove}div.ridge {border-style: ridge}div.inset {border-style: inset}div.outset {border-style: outset}</style></head><body><div class="dotted">点状边框</div><div class="dashed">虚线边框</div><div class="solid">实线边框</div><div class="double">双线边框</div><div class="groove">3D 凹槽边框</div><div class="ridge">3D 垄状边框</div><div class="inset">3D inset 边框</div><div class="outset">3D outset 边框</div></body></html>
效果图:
css border-style属性
border-style属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
属性值:
值 | 描述 |
---|---|
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 | 规定应该从父元素继承边框样式。 |
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注编程网行业资讯频道,感谢您对编程网的支持。