DIV和CSS实现虚线边框|CSS虚线下划线及虚线的方法-tutorial css-php.cn

DIV和CSS实现虚线边框|CSS虚线下划线及虚线的方法

不言

Lepaskan： 2018-06-28 13:44:43

asal

3700 orang telah melayarinya

这篇文章主要介绍了关于DIV和CSS实现虚线边框|CSS虚线下划线及虚线的方法，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

这里通过边框属性的虚线边框border控制虚线

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

一、四边为虚线边框

border:1px dashed #000; 黑色虚线边框[code/]

Salin selepas log masuk

实例：
CSS代码：

[code].pcss5{border:1px dashed #000; height:50px;width:350px}

Salin selepas log masuk

Html代码：

<p class="pcss5">我的四边为黑色虚线边框</p>

Salin selepas log masuk

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

二、左边为虚线：

CSS代码：

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

Salin selepas log masuk

Html代码：

<p class="pcss5-1">我的左边为黑色虚线边框</p>

Salin selepas log masuk

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

三、右边为虚线：

CSS代码：

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

Salin selepas log masuk

Html代码：

<p class="pcss5-2">我的右边为黑色虚线边框</p>

Salin selepas log masuk

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

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

CSS代码：

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

Salin selepas log masuk

Html代码：

<p class="pcss5-3">我的上边为黑色虚线边框</p>

Salin selepas log masuk

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

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

CSS代码：

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

Salin selepas log masuk

Html代码：

<p class="pcss5-4">我的下边为黑色虚线边框</p>

Salin selepas log masuk

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

六、任意一边不为虚线，其它三边为虚线情况

加入右边边框不为虚线而没有边线，其它三边为黑色虚线边框

CSS代码：

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

Salin selepas log masuk

Html代码：

我的右边边框无边线而其它三边为黑色虚线边框实例 
这里通过先设置了该对象四边为黑色1px虚线边框，紧接着又设置一边边线为0的设置，这样相当于设置了3边的边框虚线属性，但是这里注意边框属性设置前后顺序。 
以上实例完整p+CSS代码如下： 
 
 
 
 
CSS 虚线 pCSS5实例说明www.pcss5.com 
 
 
 
www.pcss5.com css虚线实例实例
我四边为虚线边框
<p class="pcss5-1">我的左边为黑色虚线边框</p>
<p class="pcss5-2">我的右边为黑色虚线边框</p>
<p class="pcss5-3">我的上边为黑色虚线边框</p>
<p class="pcss5-4">我的下边为黑色虚线边框</p>
我的右边边框无边线而其它三边为黑色虚线边框实例

Salin selepas log masuk

2、超链接虚线下划线 - TOP

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

一、带链接文字有虚线下划线

这里也是通过CSS border边框属性来控制超链接a对象的CSS样式。

演示CSS代码：

a{ border-bottom:1px dashed #111;}/* 这里设置带链接文字下方出现虚线下划线*/

Salin selepas log masuk

a:hover{ border:0;}/* 这里设置鼠标经过被链接文字时不出现虚线 */

Salin selepas log masuk

完整div CSS代码：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="gb2312" /> 
<title>CSS 虚线下划线 pCSS5实例说明</title> 
<style> 
a{ border-bottom:1px dashed #111;text-decoration:none;} 
a:hover{ border:0;} 
</style> 
</head> 
<body> 
欢迎到<a href="http://www.pcss5.com/">CSS教程网</a>的www.pcss5.com - pcss5学习CSS 
</body> 
</html>

Salin selepas log masuk

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

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

二、鼠标放到带链接文字上时出现虚线下划线

这个和上面的很相似，只需对超链接 A去掉下划线，对鼠标经过时CSS文字下方带虚线边框下划线即可。

对应CSS代码：

a{text-decoration:none;}
[/code]a:hover{border-bottom:1px dashed #111;} [/code]

Salin selepas log masuk

这样就实现，大家不妨试试超链接下划线实例。

3、列表型CSS虚线下划线 - TOP

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

这里我们只需对LI设置底部边框为虚线边框即可。

首先我们是在对CSS初始化情况下设置CSS代码：

li{border-bottom:1px dashed #111;}

Salin selepas log masuk

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

对应CSS li代码：

Li{background:url(点图片路径) repeat-x 0 bottom}

Salin selepas log masuk

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

4、CSS定义一条水平虚线 - TOP

这个很好理解同样可以使用对p对象设置边框虚线即可实现同时也可以对hr水平线标签设置虚线属性即可实现水平虚线分割线。

这里带过即可如下：

对p设置水平虚线线：

.pcss5{ height:1px; width:100%; border-bottom:1px dashed #000;}

Salin selepas log masuk

对应HTML代码：

<p class="pcss5"></p>

Salin selepas log masuk

对hr水平分割线设置属性：

第一种，hr标签内设置虚线属性：

<hr size=1 style="color: blue;border-style:dashed ;width:100%">

Salin selepas log masuk

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

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

hr {border-top:1px dashed #00F ; }

Salin selepas log masuk

对应html内hr标题代码：

<hr size=1>

Salin selepas log masuk

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

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

DIV和CSS实现虚线边框|CSS虚线下划线及虚线的方法