您的位置:首页 > CSS技巧 > 【 返回上一页

css虚线样式布局集合

DIV CSS虚线样式集合

这节为大家介绍css虚线有哪些样式效果。大多虚线使用border边框虚线样式实现,也有使用虚线样的图片作为背景实现。

1、边框虚线
2、下划线虚线
3、列表虚线分割(分隔)

接下来ThinkCSS为大家逐一介绍以上css 虚线样式实现与CSS布局虚线技巧。

一、div css border边框虚线样式

虚线样式,一般可以使用css边框样式实现,边框可以设置虚线与实线样式。

CSS虚线边框样式代码与不同虚线效果截图。

1、CSS代码:

  1. .x1{ border:2px dashed #333} 
  2. .x2{ border:2px dotted #333} 

2、HTML内容代码:

  1. <p class="x1">长虚线</p> 
  2. <p class="x2">圆点虚线 不兼容低版本浏览器</p> 

3、浏览器效果截图:

CSS两种虚线边框实例效果截图
CSS两种虚线边框实例效果截图

4、注意——border虚线边框样式使用特别说明
从上看出border边框有两种虚线效果,dashed长断线效果虚线效果,dotted圆点方正短虚线效果。两种虚线边框样式在实际使用过程中并非都能使用,第一种dashed(长虚线)兼容各大浏览器,可以任意使用;第二种dotted(圆点)效果紧密的虚线效果比较漂亮,看似很多布局中都能看见,实际上别人DIV CSS布局并不是使用border dotted实现,而是使用虚线图片作为背景图片水平平铺实现这样虚线效果,因为border的dotted 兼容不好,有点浏览器能正常显示有的浏览器显示是实现。

注意:长虚线可以使用border dashed实现,兼容没问题,如果是圆点一样密集虚线就需要图片作为背景图实现。在本文第三部分为大家图文实例介绍。

二、CSS 下划线虚线

下划线为虚线一般用于CSS文字下划线比较多,如果要让这样虚线下划线布局简单,一般采用css border-bottom下边框虚线样式实现。

在ThinkCSS关于下划线虚线有几篇文章有详细图文介绍,这里不再实例图文介绍虚线的下划线,可进入以下详细教程文章:
1、《css 下划线虚线》
2、《div css虚线边框》
3、《CSS下划线颜色改变》
4、《css字体与下划线距离设置》

三、css li列表虚线分割

通常看到漂亮的圆点靠很近的css li布局比较多,每行li下边使用虚线效果让li上下内容分割开,而采用border-bottom下划线虚线效果达不到和美工图一样虚线效果。如果是长短线的虚线那可以使用border-bottom dashed虚线下划线样式实现,如果是短虚线(如下图)下划线效果,虽然可以使用border-bottom dotted实现,但是不兼容各大浏览器,所以需要切出图片作为背景布局实现虚线效果。

DIV CSS虚线效果布局截图
DIV CSS虚线效果布局截图

这种虚线效果的分割线(分隔线)一般采用图片素材作为背景实现。接下来ThinkCSS为大家先切出图片素材,再通过DIV CSS布局出这样的效果。
1、使用PS软件切出图片素材
因为这个图片具有规律,不需要切整条虚线,只需要切出一个点和一个间隔。

PS切片工具画好,要切出图片素材截图
PS切片工具画好,要切出图片素材截图

以上图片是PS软件放大后效果,PS软件放大缩小不影响切出图片效果和质量。切出并导出gif图片格式。

这里命名为do.gif(鼠标右键点击另存为

首先布局前引入ThinkCSS初始化模板,再此基础上修改CSS和HTML代码达到适合本实例项目。

2、实例关键CSS代码

  1. ul.news{overflow:hidden;width:296px; padding:30px;} 
  2. ul.news li{float:left;width:100%;height:30px;overflow:hidden; 
  3. line-height:30px;color:#B0B2B5;text-align:left;font-size:14px; 
  4. background:url(do.gif) repeat-x 0 bottom} 

3、css li虚线下分割线实例HTML内容代码

  1. <ul class="news"> 
  2. <li>&#8226; <a href="https://www.thinkcss.com/css/992.shtml" target="_blank">
    css边框虚线 border虚线边框效果设置</a></li> 
  3. <li>&#8226; <a href="https://www.thinkcss.com/css/991.shtml" target="_blank">
    css width:auto不需要设置的宽度</a></li> 
  4. <li>&#8226; <a href="https://www.thinkcss.com/css/988.shtml" target="_blank">
    css border-left【css 左边框】样式属性</a></li> 
  5. <li>&#8226; <a href="https://www.thinkcss.com/css/979.shtml" target="_blank">
    css text-decoration underline用法作用</a></li> 
  6. <li>&#8226; <a href="https://www.thinkcss.com/css/975.shtml" target="_blank">
    css 下划线设置 DIV CSS设置文字字体下划线</a></li> 
  7. <li>&#8226; <a href="https://www.thinkcss.com/css/974.shtml" target="_blank">
    css去掉下划线</a></li> 
  8. <li>&#8226; <a href="https://www.thinkcss.com/css/973.shtml" target="_blank">
    css border-top div css上边框样式设置</a></li> 
  9. <li>&#8226; <a href="https://www.thinkcss.com/css/968.shtml" target="_blank">
    css height百分比 css高度百分比使用教程</a></li> 
  10. <li>&#8226; <a href="https://www.thinkcss.com/css/940.shtml" target="_blank">
    css letter-spacing:2px什么意思及作用</a></li> 
  11. <li>&#8226; <a href="https://www.thinkcss.com/css/930.shtml" target="_blank">
    css边框大小厚度宽度改变 css border大小设置</a></li> 
  12. </ul> 

4、效果截图

圆点图片作为CSS背景布局虚线列表效果截图
圆点图片作为CSS背景布局虚线列表效果截图

5、在线演示与打包下载

图片虚线布局在线演示:

查看案例

css图片背景虚线分隔线打包下载:

6、小结
这里关键技术点为,使用圆点虚线图片作为li背景图片并且图片靠li底部水平平铺实现虚线样式效果。

四、css虚线样式总结

CSS 虚线一般使用border边框虚线样式实现,灵活使用css边框样式布局,根据需求设置单边、多边虚线效果,如果边框虚线达不到想要DIV CSS布局样式,一般还可以使用图片素材来布局,CSS DIV布局本身是一个灵活布局的技术,利用有限CSS样式属性达到千变万化布局效果。

相关标签: 下划线 虚线
如需转载,请注明文章出处和来源网址:https://www.thinkcss.com/jiqiao/1023.shtml

日期:2016-08-15 11:06 www.thinkcss.com ThinkCSS