网站建设资讯

NEWS

网站建设资讯

css如何设置边框的虚线样式

这篇文章主要为大家展示了“css如何设置边框的虚线样式”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css如何设置边框的虚线样式”这篇文章吧。

坚守“ 做人真诚 · 做事靠谱 · 口碑至上 · 高效敬业 ”的价值观,专业网站建设服务10余年为成都成都LED显示屏小微创业公司专业提供企业网站建设营销网站建设商城网站建设手机网站建设小程序网站建设网站改版,从内容策划、视觉设计、底层架构、网页布局、功能开发迭代于一体的高端网站建设服务。

首先要知道在css中我们是使用border属性来设置边框的,它可以通过设置边框的宽度、颜色、圆角度、样式(实线、虚线、双线等等)。

html代码:

这是一段测试文字1,实现虚线边框

这是一段测试文字2,实现虚线边框

css代码:

.p1{

border:5pxdashed#009999;

padding:10px;

}

.p2{

border:5pxdotted;

border-color:linear-gradient(toright,red,yellow,blue);

padding:10px;

效果图:


css如何设置边框的虚线样式


 

我们可以看出,cssborder边框属性可以设置两种不同的边框的虚线样式,分别是通过border边框属性中dotted跟dashed两个属性值设置的。下面我们来看看border设置这两个属性值的效果:

dashed值:可以定义虚线,这样边框就可以呈现扁状的虚线样式。

dotted值:定义点状边框,使得边框呈现连续的点状,进而实现边框的点状虚线样式。

注:所有浏览器都支持border属性,不用担心兼容性。

以上是“css如何设置边框的虚线样式”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


本文名称:css如何设置边框的虚线样式
网站地址:http://cdweb.net/article/jdjjci.html

其他资讯