创新互联CSS教程：CSS虚线实现方法及多种应用实例

很多 CSS 初学者在前端开发过程中，经常会用到 CSS 虚线样式，但是不知道 CSS 虚线样式该如何实现，比如一个 CSS 这样写：​border-style:dotted solid double dashed; ​出来的框就是：上边框是点状，右边框是实线，下边框是双线，左边框是虚线，如果一个 CSS 这样写：border-bottom:1px dashed #000000;出来的框就是一条宽度为1像素的黑色下划虚线··· CSS 关于“线”的类型还真是挺多的，其中新手们比较关注的还是“虚线的实现方法”。

创新互联是一家网站设计制作、做网站，提供网页设计，网站设计，网站制作，建网站，按需网站策划，网站开发公司，自2013年创立以来是互联行业建设者，服务者。以提升客户品牌价值为核心业务，全程参与项目的网站策划设计制作，前端开发，后台程序制作以及后期项目运营并提出专业建议和思路。

css虚线实现方法

定义和用法：

border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。只有当这个值不是 ​
none​ 时边框才可能出现。

这里边框属性的虚线边框 ​
border ​控制虚线。以下配置的 CSS 高度(CSS height)和 CSS 宽度( CSS width)为350像素。

1、四边为虚线边框

​
border:1px dashed #000;​ 黑色虚线边框

实例：

实例

.hackhome{border:1px dashed #000; height:50px;width:350px}

尝试一下 » 这里配置边框缩写形式解释 ​
hackhome​ 挑选器四边边框为1px的黑色虚线边框

2、左边为虚线：

实例

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

尝试一下 »
这里配置了左边一边为黑色虚线边框



3、右边为虚线：

实例

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

尝试一下 » 这里配置了右边一边为黑色虚线边框

4、顶部边(上边)为虚线：

实例

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

尝试一下 » 这里配置了顶边(上边线)一边为黑色虚线边框

5、底部边(下边)为虚线：

实例

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

尝试一下 » 这里配置了底边(下边线)一边为黑色虚线边框

6、随意一边不为虚线，其它三边为虚线状况

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

实例

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

尝试一下 » 这里先配置了该对象四边为黑色1px 虚线边框，紧接着又配置一边边线为0的配置，这样相当于配置了3边的边框虚线属性，但是这里留意边框属性配置前后顺序

常用css虚线样式

例1

​
border-style:dotted solid double dashed;  ​

上边框是点状

右边框是实线

下边框是双线

左边框是虚线

例2

​
border-style:dotted solid double; ​

上边框是点状

右边框和左边框是实线

下边框是双线

例3

​
border-style:dotted solid; ​

上边框和下边框是点状

右边框和左边框是实线

例4

​
border-style:dotted; ​

所有 4 个边框都是点状

怎么用CSS实现链接的虚线下划线效果

修改您的样式表，找下边这段（一般都在开头）

a {

color:#3399FF;

font-weight:Normal; /*字体效果 普通 可以改成bold粗体*/

text-decoration:none; /*下划线效果：无下划线*/

}

a:hover {

color:#4499EE;

text-decoration:none; /*下划线效果：无下划线*/

border-bottom: 1px #0099CC dotted /*加一个只有下边的框 边框为虚线*/

}

a{}控制连接的效果 a:hover{}控制鼠标移上去的效果。

css分割线虚线代码应用实例

实心的线条:

竖直线：

虚线：

双线：

网站名称：创新互联CSS教程：CSS虚线实现方法及多种应用实例
标题路径：http://www.shufengxianlan.com/qtweb/news4/279854.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联