Heim > Web-Frontend > CSS-Tutorial > Hauptteil

常见的CSS 虚线实例教程

零下一度
Freigeben: 2017-06-16 13:53:42
Original
2606 人浏览过

DIV CSS虚线教程篇包括讲解常常出现的各种样式的DIV虚线案例CSS教程。

本节为大家介绍常见的CSS 虚线及DIV教程。CSS虚线下划线、列表虚线统统搞定。

1、CSS边框虚线

这里通过边框属性的虚线边框border控制虚线。以下设置的css 高度(css height)和css 宽度(css width)为350像素是为了便于观看演示 其它意思。
一、四边为虚线边框
border:1px dashed #000; 黑色虚线边框
实例:
CSS代码: .divcss5{border:1px dashed #000; height:50px;width:350px}
Html代码:

我的四边为黑色虚线边框

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

二、左边为虚线:
CSS代码: .divcss5-1{border-left:1px dashed #000; height:50px;width:350px}
Html代码:

我的左边为黑色虚线边框

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

三、右边为虚线:
CSS代码: .divcss5-2{border-right:1px dashed #000; height:50px;width:350px}
Html代码:

我的右边为黑色虚线边框

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

四、顶部边(上边)为虚线:
CSS代码: .divcss5-3{border-top:1px dashed #000; height:50px;width:350px}
Html代码:

我的上边为黑色虚线边框

这里设置了顶边(上边线)一边为黑色虚线边框

五、底部边(下边)为虚线:
CSS代码: .divcss5-4{border-bottom:1px dashed #000; height:50px;width:350px}
Html代码:

我的下边为黑色虚线边框

这里设置了底边(下边线)一边为黑色虚线边框

六、任意一边不为虚线,其它三边为虚线情况
加入右边边框不为虚线而没有边线,其它三边为黑色虚线边框
CSS代码: .divcss5-5{border:1px dashed #000;border-right:0; height:50px;width:350px}
Html代码:

我的右边边框无边线而其它三边为黑色虚线边框实例

这里通过先设置了该对象四边为黑色1px虚线边框,紧接着又设置一边边线为0的设置,这样相当于设置了3边的边框虚线属性,但是这里注意边框属性设置前后顺序。

以上实例完整DIV+CSS代码如下:





CSS 虚线 DIVCSS5实例说明<title>m.sbmmt.com


www.divcss5.com css虚线实例实例
我四边为虚线边框

我的左边为黑色虚线边框

我的右边为黑色虚线边框

我的上边为黑色虚线边框

我的下边为黑色虚线边框

我的右边边框无边线而其它三边为黑色虚线边框实例
Nach dem Login kopieren

2、超链接虚线下划线

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

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

演示CSS代码:
a{ border-bottom:1px dashed #111;}/* 这里设置带链接文字下方出现虚线下划线*/
a:hover{ border:0;}/* 这里设置鼠标经过被链接文字时不出现虚线 */

完整DIV CSS代码:

CSS 虚线下划线 DIVCSS5实例说明
欢迎到CSS教程网的m.sbmmt.com- divcss5学习CSS
Nach dem Login kopieren

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

以上是常见的CSS 虚线实例教程的详细内容。更多信息请关注PHP中文网其他相关文章!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!