正文
CSS虚线样式美甲,css 虚线样式
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
如何用CSS定义虚线间隔
在正式绘制边框前，我们先认识一下CSS3 border-image-slice 属性，它可以将border-image-source获取的边框背景图片切割为9份。语法如下：
border-image:border-image-source slice-width{1,4}
slice-width的值可以是具体像素，也可以是百分比。切割后的图片块分别是
border-top-left-image border-top-image border-top-right-image
border-left-image border-right-image
border-bottom-left-image border-bottom-image border-bottom-right-image
其中，border-top-image和border-bottom-image区域受到水平方向效果影响，如果是repeat则此区域图片会水平重复，如果是round则会水平平铺，责任stretch则被水平拉升。而我们设置虚线，则选择repeat/round都可以。
相关问答
Q1: 网页效果css问题
拜托不要误导新人，用空标签是不符合W3C规范的，用图片是浪费空间的。
虚线做法是 设置上下li标签的边框样式实现的：
border-top: 1px dashed #FCF9F6;
border-bottom: 1px dashed #D6C1AB;
【dashed就是虚线的意思】
布局：
从女装开始到最后为一个UL
虚线分割UL中的每个LI
“女装”等为h3标题中的链接
其他子项为a链接
源代码：
!-- left sidebar start --
div class="sidebar_wrap fl"
h2 class="sidebar_title"热卖类目/h2
ul class="sidebar area" data-area="sidebar"
li
h3
a href="/nvzhuang/"女装/a
/h3
div
a href="/f_shishang/"时尚/a
a href="/qingchun/"清纯/a
a href="/zhichang/"职场/a
a href="/qijiandian/" class="notify"品牌正品/abr
a href="/yedianxinggan/"夜店性感/a
a href="/niuzai/"牛仔/a
a href="/siwa/"丝袜/a
a href="/qinglvzhuang/"情侣装/abr
a href="/mmzhuang/"妈妈装/a
a href="/yurongfu/"羽绒服/a
a href="/maoyi/" 毛衣/a
/div
/li
li
h3 style="background-position:0 -81px;"
a href="/nanzhuang/"男装/a
/h3
div
a href="/m_shishang/"时尚/a
a href="/xiuxian/"休闲/a
a href="/shangwu/"商务/a
a href="/xiha/"嘻哈/a
a href="/m_qijiandian/"品牌正品/abr
a href="/m_yurongfu/"羽绒服/a
/div
/li
li
h3 style="background-position:0 -236px;"
a href="/nvxie/"女鞋/a
/h3
div
a href="/x_shunv/"淑女/a
a href="/x_qijiandian/"品牌正品/a
a href="/x_zhichang/"职场/a
a href="/keai/"可爱/abr
a href="/xuedixue/"雪地靴/a
/div
/li
li
h3 style="background-position:0 -326px;"
a href="/nanxie/"男鞋/a
/h3
div
a href="/mx_xiuxian/"休闲/a
a href="/mx_shangwu/"商务/a
a href="/mx_qijiandian/"品牌正品/a
/div
/li
li
h3 style="background-position:0 -410px;"
a href="/yundong/"运动/a
/h3
div
a href="/yundongxie/"运动鞋/a
a href="/yundongzhuang/"运动装/a
a href="/qicai/"器材/a
a href="/qiulei/"球类/a
/div
/li
li
h3 style="background-position:0 -885px;"
a href="/mobile/"手机/a
/h3
div
a href="/htc/" class="notify"hTC/a
a href="/iphone/"iPhone/a
a href="/samsung/"三星/a
a href="/nokia/"诺基亚/aBR
a href="/moto/"摩托罗拉/a
a href="/m_qita/"其他手机/a
/div
/li
li
h3 style="background-position:0 -493px;"
a href="/xiangbao/"箱包/a
/h3
div
a href="/nvbao/"女包/a
a href="/lvxingxiangbao/"旅行箱/a
a href="/nanbao/"男包/a
a href="/pinpaidaigou/"品牌代购/a
/div
/li
li
h3 style="background-position:0 -159px;"
a href="/neiyi/"内衣/a
/h3
div
a href="/chengshu/"熟女/a
a href="/shaonv/"少女/a
a href="/shuiyi/"睡衣/a
a href="/nanshi/"男士/a
a href="/n_qijiandian/"品牌正品/a
/div
/li
li
h3 style="background-position:0 -588px;"
a href="/meirong/"美容/a
/h3
div
a href="/hufu/"护肤/a
a href="/caizhuang/"彩妆/a
a href="/xiangshui/"香水/a
a href="/meijia/"美甲/a
a href="/mr_nanshi/"男士/a
/div
/li
li
h3 style="background-position:0 -686px;"
a href="/peijian/"配件/a
/h3
div
a href="/p_shipin/"饰品/a
a href="/weijin/" 围巾/a
a href="/shoubiao/"手表/a
a href="/taiyangjing/"太阳镜/abr
a href="/zippo/"zippo/a
a href="/qita/"其他/a
/div
/li
li
h3 style="background-position:0 -790px;"
a href="/muying/"母婴/a
/h3
div
a href="/tongzhuang/"童装/a
a href="/naifen/"奶粉/a
a href="/yunfu/"孕妇装/a
a href="/yingeryongpin/"婴儿用品/a
a href="/tongxie/"童鞋/a
a href="/qinzizhuang/"亲子装/a
a href="/wanju/"玩具/a
/div
/li
li
h3 style="background-position:0 -1117px;"
a href="/shuma/"数码/a
/h3
div
a href="/xiangji/"相机/a
a href="/bijiben/"笔记本/a
a href="/shumapeijian/"数码配件/a
a href="/mp3mp4/"MP4 MP3/a
/div
/li
li
h3 style="background-position:0 -970px;"
a href="/food/"食品/a
/h3
div
a href="/qiaokeli/"巧克力/a
a href="/jianguoganhuo/"坚果干货/a
a href="/tangguo/"糖果/a
a href="/chaye/"茶叶/abr
a href="/rouleilingshi/"肉类零食/a
a href="/yingyangbupin/"营养补品/a
/div
/li
li class="last"
h3 style="background-position:0 -1045px;"
a href="/jujia/"居家/a
/h3
div
a href="/jiafangchuangpin/"家纺床品/a
a href="/riyong/"日用/a
a href="/qicheyongpin/"汽车用品/a
a href="/jiaju/"家具/a
a href="/chufangyongpin/"厨房用品/a
/div
/li
/ul
/div
!-- left sidebar --
Q2: 表格边框以虚线显示的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
Q3: 用DW制作网页，怎么用CSS做虚线和背景？
新建CSS样式 这里可以选择虚线，实线。或者是没有线，自己试一下就知道了
Q4: 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
效果图如下：
