当前位置:Gxlcms > 前端框架 > CSS虚线样式的制作方法及虚线样式的运用实例

CSS虚线样式的制作方法及虚线样式的运用实例

时间:2021-07-01 10:21:17 帮助过:94人阅读

在页面布局时,为了呈现一定的效果,经常需要使用CSS虚线样式,但是很多人新手对CSS虚线样式还比较陌生,这篇文章就和大家讲讲,如何使用CSSborder属性制作虚线样式,以及CSS虚线样式的一些运用实例。比如:CSS虚线边框的运用,CSS虚线下边框的运用,一条虚线的运用等等。有需要的小伙伴可以参考一下。

一、CSS虚线的制作方法

border-style 属性可以设置一个元素的四个边框的样式, 它的常用属性值如下:
dotted :点状,在大多数浏览器中呈现为实线
dashed :虚线,在大多数浏览器中呈现为实线
solid :定义实线
none:无边框
double:双线
CSS虚线样式的实现就是用的属性值dashed,dotted。

border-style属性可以设置一个值,两个值,三个值,四个值,他们代表的意思如下:
1、border-style:dotted solid double dashed
表示上边框是点状,右边框是实线,下边框是双线,左边框是虚线
2、border-style:dotted solid double
表示上边框是点状,右边框和左边框是实线,下边框是双线
3、border-style:dotted solid
表示上边框和下边框是点状,右边框和左边框是实线
4、border-style:dotted
表示所有4个边框都是点状

边框的写法: border:border-width, border-style,border-color 。所以,宽度为1px的黑色虚线可以这样写 border:1px dashed #000;

二、CSS虚线的运用实例

1、CSS虚线边框

<style type="text/css">
   div{border: 1px dashed #000;}
  </style>
 <body>
  <div>生活不止眼前的苟且,还有诗和远方的田野</div>
 </body>

效果图:

虚线1.jpg

2、li列表虚线分割,即CSS虚线下边框

页面中用css li标签布局的也比较多,每行li下边用虚线将内容分开,用border-bottom来实现。

<style type="text/css">
   li{border-bottom: 1px dashed #000;}
  </style>
 <body>
  <ul>
   <li>have a nice day </li>
   <li>have a nice day </li>
   <li>have a nice day </li>
   <li>have a nice day </li>
   <li>have a nice day </li>
   <li>have a nice day </li>
   <li>have a nice day </li>   
  </ul>
 </body>

效果图:

虚线2.jpg

3、CSS一条水平虚线,用hr 标签,然后对hr标签添加样式,border: 1px dotted #FF0000

<hr style="border: 1px dotted #FF0000;">

效果图:

虚线3.jpg

4、超链接虚线下划线,用border-bottom: 1px dashed #FF0000,对a标签中的内容进行强调。

<style type="text/css">
   a{text-decoration: none;border-bottom: 1px dashed #FF0000;}
</style>
 <body>
  <div>欢迎大家来<a href="#">PHP中文网</a>学习知识</div>
 </body>

效果图:

虚线4.jpg

以上介绍了CSS虚线样式的制作方法,以及虚线样式在页面布局中的运用实例,小伙伴们可以多动手尝试,试一试不一样的效果,希望这篇文章可以帮助爱学习的你!

以上就是CSS虚线样式的制作方法及虚线样式的运用实例的详细内容,更多请关注Gxlcms其它相关文章!

人气教程排行