DIV+CSS实例虚线边框|CSS虚线下划线及虚线用应

1、CSS边框虚线 - TOP
这里通过边框属性的虚线边框border控制虚线。以下设置的css 高度(css height)和css 宽度（css width）为350像素是为了便于观看演示 其它意思。
一、四边为虚线边框


Html代码：

这里设置边框缩写方式定义divcss5选择器四边边框为1px的黑色虚线边框

二、左边为虚线：
CSS代码：

Html代码：

这里设置了左边一边为黑色虚线边框

三、右边为虚线：
CSS代码：

Html代码：

这里设置了右边一边为黑色虚线边框

四、顶部边（上边）为虚线：
CSS代码：

Html代码：

这里设置了顶边（上边线）一边为黑色虚线边框

五、底部边（下边）为虚线：
CSS代码：

Html代码：

这里设置了底边（下边线）一边为黑色虚线边框

六、任意一边不为虚线，其它三边为虚线情况
加入右边边框不为虚线而没有边线，其它三边为黑色虚线边框
CSS代码：

Html代码：



2、超链接虚线下划线 - TOP
我们常常会设置被链接的文字内容要么带链接有虚线的下划线，或鼠标移动到有链接的文字上出现虚线下划线，这个怎么实现的呢，这里为大家介绍关于CSS超链接的虚线下划线。

一、带链接文字有虚线下划线
这里也是通过CSS border边框属性来控制超链接a对象的CSS样式。

演示CSS代码：





完整DIV CSS代码：







说明：text-decoration:none;这个是去掉CSS 下划线（超链接默认自带的下划线属性）



以上为有CSS超链接的文字带虚线下划线。

二、鼠标放到带链接文字上时出现虚线下划线
这个和上面的很相似，只需对超链接 A去掉下划线，对鼠标经过时CSS文字下方带虚线边框下划线即可。
对应CSS代码：


[/code]a:hover{border-bottom:1px dashed #111;} [/code]
这样就实现，大家不妨试试超链接下划线实例。

3、列表型CSS虚线下划线 - TOP
常常他们碰到CSS LI的时候希望此CSS 列表样式每排内容下方为虚线分割开如下图

这里我们只需对LI设置底部边框为虚线边框即可。
首先我们是在对CSS初始化情况下设置CSS代码：

即可实现li的列表型内容如上图虚线隔开效果（每个li内容底部为虚线边框）
还有我们常常碰见li的底部虚线很小就如一个点那么小，而border就很难实现了，这个时候我们需要一张虚线的点图片即可(一边高1像素宽3像素的1像素颜色图片即可实现)
对应CSS li代码：


这里不再详细演示我们在VIP也为大家详细介绍和演示制作各种li的CSS知识点。

4、CSS定义一条水平虚线 - TOP
这个很好理解同样可以使用对div对象设置边框虚线即可实现同时也可以对hr水平线标签设置虚线属性即可实现水平虚线分割线。

这里带过即可如下：
对div设置水平虚线线：


对应HTML代码：



对hr水平分割线设置属性：
第一种，hr标签内设置虚线属性：



这里说明的是size为hr的值，一边设置为1即可。

第二种在css代码或CSS文件中定义hr的css属性


对应html内hr标题代码：


这里是对hr设置边框为顶部或底部上下边任意一条边为1像素的蓝色虚线边框，同时设置hr的size为1，和第一种值大致相同，唯一区别在于当在html中出现了hr标签，hr标签属性就为css设置，如果网页多次出现可以减少代码量。

以上所有的CSS虚线涉及了css borer、CSS 下划线、CSS 背景等知识，希望大家能掌握各种方法设置DIV虚线、虚线边框、DIV CSS虚线下划线的方法。

最新评论