登录  /  注册
首页 >web前端 >css教程 > 正文

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

原创2018-09-18 14:41:385194

在页面布局时,为了呈现一定的效果,经常需要使用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虚线样式的制作方法及虚线样式的运用实例的详细内容,更多请关注php中文网其它相关文章!

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

  • 相关标签:CSS,虚线,border
  • 相关文章

    相关视频


    视频教程分类

    专题推荐