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

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

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

　　html代码：

　　<divclass="demo">

　　<pclass="p1">这是一段测试文字1，实现虚线边框</p>

　　<pclass="p2">这是一段测试文字2，实现虚线边框</p>

　　</div>

　　css代码：

　　.p1{

　　border:5pxdashed#009999;

　　padding:10px;

　　}

　　.p2{

　　border:5pxdotted;

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

　　padding:10px;

　　效果图：

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

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

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

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

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