正文
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定义了一个水平的虚线。
相关问答
Q1: 表格边框以虚线显示的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
Q2: 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
会显现出
Q3: 用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);
}
参考图：
