在网页布局中, 有时为了整体网页的美观, 我们需要设置不同的边框样式. 那么怎么设置边框的虚线样式? 本篇文章就给大家介绍 CSS 设置边框虚线样式的两种方式. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对你有所帮助.
首先要知道在 CSS 中我们是使用 border 属性来设置边框的, 它可以通过设置边框的宽度, 颜色, 圆角度, 样式 (实线, 虚线, 双线等等).
下面我们通过简单的代码示例来具体看看 CSS 的 border 边框属性是怎么设置边框虚线的.
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <style type="text/css">
- .box1{ border: 4px dashed palegoldenrod; padding: 10px; } .box2 { border:
- 5px dotted pink; padding: 10px; }
- </style>
- </head>
- <body>
- <div class="demo">
- <p class="box1">
- 这是一段测试文字 1, 实现虚线边框
- </p>
- <p class="box2">
- 这是一段测试文字 2, 实现虚线边框
- </p>
- </div>
- </body>
- </HTML>
效果图:
我们可以看出, CSS border 边框属性可以设置两种不同的边框的虚线样式, 分别是通过 border 边框属性中 dotted 跟 dashed 两个属性值设置的. 下面我们来看看 border 设置这两个属性值的效果:
dashed: 可以定义虚线, 这样边框就可以呈现扁状的虚线样式.
dotted: 定义点状边框, 使得边框呈现连续的点状, 进而实现边框的点状虚线样式.
注: 所有浏览器都支持 border 属性, 不用担心兼容性.
来源: http://www.css88.com/qa/css3/13731.html