请问一下网页中的圆点虚线用CSS怎么做？

html-css057

请问一下网页中的圆点虚线用CSS怎么做？,第1张

border线型主要有：

1、dotted【点状】

2、solid【实线】

3、double【双实线】

4、dashed【虚线】

实例一：如果一个CSS这样写：border-style:dotted solid double dashed出来的框就是：上边框是点状，右边框是实线，下边框是双线，左边框是虚线

实例二：如果一个CSS这样写：border-bottom:1px dashed #000000出来的框就是：一条宽度为1像素的黑色下划虚线。

以此类推。多试试就知道什么效果了哦。

<!DOCTYPE HTML>

<html>

<meta charset="UTF-8" />

<head>

<title></title>

</head>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<style type="text/css">

*{

margin: 0

padding: 0

}

.box {width: 100%border: 1px solid #000000box-sizing: border-boxposition: relative}

.img1{height: 100%width: 100%}

li{list-style: none}

.box li{border-bottom: 1px dashed #000000width: 80%background: #DCDCDCheight: 35px}/*dashed是虚线width控制li的宽度*/

.text{position: absolutetop:42.5pxleft:30%}

.text20{position: absolutetop:42.5pxright:20px}

</style>

<body>

<div class="demo">

<div class="box" style="">

<ul>

<li>内容1</li>

<li>内容2</li>

<li>内容3</li>

</ul>

<div class="text">

灰色内容占总宽度80%

</div>

<div class="text20">

白色内容占</br>总宽度20%

</div>

</div>

</div>

</body>

</html>