codecamp

CSS虚线实现方法及多种应用实例

很多 CSS 初学者在前端开发过程中,经常会用到 CSS 虚线样式,但是不知道 CSS 虚线样式该如何实现,比如一个 CSS 这样写:​border-style:dotted solid double dashed; ​出来的框就是:上边框是点状,右边框是实线,下边框是双线,左边框是虚线,如果一个 CSS 这样写:border-bottom:1px dashed #000000;出来的框就是一条宽度为1像素的黑色下划虚线··· CSS 关于“线”的类型还真是挺多的,其中新手们比较关注的还是“虚线的实现方法”。


css虚线实现方法

定义和用法:
border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式。只有当这个值不是 ​none​ 时边框才可能出现。

这里边框属性的虚线边框 ​border ​控制虚线。以下配置的 CSS 高度(CSS height)和 CSS 宽度( CSS width)为350像素。

1、四边为虚线边框
border:1px dashed #000;​ 黑色虚线边框

实例:


实例

.hackhome{border:1px dashed #000; height:50px;width:350px}


尝试一下 »
这里配置边框缩写形式解释 ​hackhome​ 挑选器四边边框为1px的黑色虚线边框

2、左边为虚线:

实例

.hackhome-1{border-left:1px dashed #000; height:50px;width:350px}


尝试一下 »
这里配置了左边一边为黑色虚线边框

3、右边为虚线:

实例

.hackhome-1{border-right:1px dashed #000; height:50px;width:350px}


尝试一下 »
这里配置了右边一边为黑色虚线边框

4、顶部边(上边)为虚线:

实例

.hackhome-1{border-top:1px dashed #000; height:50px;width:350px}


尝试一下 »
这里配置了顶边(上边线)一边为黑色虚线边框

5、底部边(下边)为虚线:

实例

.hackhome-1{border-bottom:1px dashed #000; height:50px;width:350px}


尝试一下 »
这里配置了底边(下边线)一边为黑色虚线边框

6、随意一边不为虚线,其它三边为虚线状况
参与右边边框不为虚线而没有边线,其它三边为黑色虚线边框

实例

.hackhome{ border:1px dashed #000;border-right:0; height:50px;width:350px; }

尝试一下 »
这里先配置了该对象四边为黑色1px 虚线边框,紧接着又配置一边边线为0的配置,这样相当于配置了3边的边框虚线属性,但是这里留意边框属性配置前后顺序

常用css虚线样式

例1
border-style:dotted solid double dashed; 
上边框是点状
右边框是实线
下边框是双线
左边框是虚线

例2
border-style:dotted solid double;
上边框是点状
右边框和左边框是实线
下边框是双线

例3
border-style:dotted solid;
上边框和下边框是点状
右边框和左边框是实线

例4
border-style:dotted;
所有 4 个边框都是点状

怎么用CSS实现链接的虚线下划线效果

修改您的样式表,找下边这段(一般都在开头)

a {

color:#3399FF;

font-weight:Normal; /*字体效果 普通 可以改成bold粗体*/

text-decoration:none; /*下划线效果:无下划线*/

}

a:hover {

color:#4499EE;

text-decoration:none; /*下划线效果:无下划线*/

border-bottom: 1px #0099CC dotted /*加一个只有下边的框 边框为虚线*/

}

a{}控制连接的效果 a:hover{}控制鼠标移上去的效果。


css分割线虚线代码应用实例

实心的线条:

<hr align=left width=490 color=#990099 SIZE=3 noShade>

实心线条
竖直线:

<HR align=center width=1 color=red size=100>

竖直线

虚线:

<hr size=1 style="color: blue;border-style:dotted;width:490">


虚线size

双线:

<hr size=1 style="COLOR:#ff9999;border-style:double;width:490">


双线



CSS 淘宝导航代码集合(附使用技巧)
CSS滚动条实现步骤及美化小技巧
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

CSS 相关教程

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }