css边框样式虚线,css中div边框为虚线怎么设置

CSS如何定义一条水平虚线?

需要准备的材料分别有：电脑、浏览器、html编辑器。

创新互联是一家从事企业网站建设、网站制作、成都做网站、行业门户网站建设、网页设计制作的专业的建站公司，拥有经验丰富的网站建设工程师和网页设计人员，具备各种规模与类型网站建设的实力，在网站建设领域树立了自己独特的设计风格。自公司成立以来曾独立设计制作的站点千余家。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的style标签中，输入css代码：div {height:60px;border-bottom:1px dashed}。

3、浏览器运行index.html页面，此时通过css定义了一个水平的虚线。

表格边框以虚线显示的css样式

表格边框默认是以实线进行显示的，怎么才能把它变成虚线呢？其实很简单只要简单加一些样式属性便可搞定，希望下面的例子对大家有所帮助

复制代码

代码如下:

style

.table5{text-align:center;

border:1px

solid

#cccccc;

border-radius

:3px;

background-color:#FFFFFF;

width:650px;}

.table5

td{border-bottom:1px

dashed

#cccccc;}

.table5

.last

td{border-bottom:0;}

/style

复制代码

代码如下:

table

width="100%"

border="0"

cellpadding="2"

cellspacing="0"

class="table5"

tr

td

colspan="4" /td

/tr

tr

td

width="4%"img

src="images/greendot.jpg"

width="4"

height="4"

//td

td

width="17%"

class="text-fl"萍水相逢/td

td

width="63%"

align="center"

class="text-fl"消费10个金币，对换10元手机费/td

td

width="16%"

align="center"

valign="middle"2013.01.20/td

/tr

tr

class="last"

td

img

src="images/greendot.jpg"

//td

td

class="text-fl"M萍水相MM/td

td

align="center"

class="text-fl"消费500积分，对换500粉丝/td

td

align="center"

valign="middle"2013.01.20/td

/tr

tr

td

colspan="4"/td

/tr

/table

CSS加虚线是哪个属性？

在CSS 中常见的边框(border) 属性有以下几种：

border-style

border-width

border-color

border-top-, border-left-, border-bottom-, border-right-

border

border-style

border-style属性指定边框的样式。以下的表格列出这个属性可能有的值，以及每一个值显现出来的结果。

border-width

border-width属性是用来设定边框的宽度。可用的值为thin (薄)、medium (中等)、thick (厚)，或是一个数字。

border-color

border-color属性是用来设定边宽的颜色。

border-top-, border-left-, border-bottom-, border-right-

我们可以将方向(top -上、bottom -下、left -左、right -右)和样式、宽度、及颜色合起来而成为一个属性。举例来说， border-top-style属性就是用来设定上边框的样式。以下举几个例子：

border

若四边的边框属性都一样，那我们可以用一个border属性来描述，而不必四个边都描述一次。另外，我们可以在同一行一次宣告边框样式、边框宽度、以及边框颜色。

p {

border:#0000FF 5px solid; 

}

那以下的HTML，

p用一行来宣布所有边框的属性/p  

会显现出

用css实现自定义虚线边框

开发产品功能的时候ui往往会给出虚线边框的效果图，于是乎，我们往往第一时间想到的是用css里的border，可是border里一般就提供两种效果，dashed或者dotted，ui这时就不满意了，说虚线太密了。废话不多说，下面直接给解决方案（参考css揭秘）：

div {

padding: 1em;

border: 1px dashed transparent;

background: linear-gradient(white,white) padding-box,

repeating-linear-gradient(-45deg,#ccc 0, #ccc 0.25em,white 0,white 0.75em);

}

参考图：