css边框线怎么设置
设置css边框线的方法:可以通过border-style属性来设置边框线。border-style属性可以设置成点状、虚线、实线、3D凹槽边框、垄状边框、3Dinset边框等。
【推荐课程:CSS教程】
设置css边框线的方法:
边框样式border-style
该属性是用于设置元素所有边框的样式,或者是单独地为各边设置边框样式
边框样式具有以下几种:
none:不定义边框,即无边框
dotted :边框样式为点状边框
dashed :边框样式为虚线
solid:边框样式为实线,在大多数浏览器中呈现为实线。
double:边框样式为双线。双线的宽度等于 border-width 的值。
groove:边框样式为 3D 凹槽边框,它的效果取决于 border-color 的值。
ridge :边框样式为垄状边框,它的效果取决于 border-color 的值。
inset:边框样式为3D inset 边框,它的效果取决于 border-color 的值。
outset :边框样式为 3D outset 边框,它的效果取决于 border-color 的值。
inherit:边框样式为应该从父元素继承边框样式。
案例:
设置边框的上边为点状,下边为虚线,左右两边为实线
div{ width:100px; height: 100px; border-style: dotted solid dashed solid; border-color: pink; }
效果图如下:
设置边框为3D 凹槽和垄状边框
<style type="text/css"> .box1{ width:100px; height:30px; border:5px groove pink; margin-bottom: 5px; } .box2{ width:100px; height:30px; border:5px ridge pink; } </style> </head> <body> <div class="box1">3D 凹槽边框</div> <div class="box2">垄状边框</div> </body>
效果图
总结:以上就是本篇文章的全部内容了,希望对大家对学习边框样式有所帮助。
以上就是css边框线怎么设置的详细内容,更多请关注其它相关文章!
上一篇: 理解 JavaScript Scoping & Hoisting(二)_javascript技巧
下一篇: Oracle ORA-04045 errors during recompilation/revalidation
推荐阅读
-
iOS15.4怎么设置口罩解锁 iOS15.4支持戴口罩解锁吗
-
子DIV设置了外边距为什么父级也跟着下移了_html/css_WEB-ITnose
-
div设置margin:0 auto;后弹出框错位,求解!_html/css_WEB-ITnose
-
网页标题前面的logo怎么设置
-
不知大家遇到过这种问题么,一个层宽度设为100%,并设置背景图片,在浏览器中浏览,缩小窗口到滚动条出现,然后拖动滚动条到右侧,右侧的区域变成空白,怎么解决?_html/css_WEB-ITnose
-
父元素设置overflow:hidden对定位元素也有效_html/css_WEB-ITnose
-
CSS3里怎么实现打字动画
-
为什么在html设置了禁用浏览器缓存,但点前进后退时页面还是 返回 From cache_html/css_WEB-ITnose
-
怎么让css两个属性相等_html/css_WEB-ITnose
-
a标签加上CSS样式后 onclick事件不执行,怎么办- -。_html/css_WEB-ITnose