css虚线样式美化,div虚线边框样式
在Dreamweaver中,用css样式怎么实现表格内部虚线样式?
在css里可以设置边框,你可以只要上边框或者下边框,你可以设置只要上下不要左右,这样就不会有重叠了!
创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站建设、成都网站设计、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的盐都网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!
用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);
}
参考图:
表格边框以虚线显示的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有两种虚线形式,一种是dashed,一种是dotted;如:
div style="width:100px;height:100px;border:1px dashed red"/div
div style="width:100px;height:100px;border:1px dotted red"/div
效果图如下:
本文标题:css虚线样式美化,div虚线边框样式
网站链接:http://hbruida.cn/article/dsgejop.html