直接运用CSS中的文本修饰属性text-decoration是没有办法实现下划线为虚线的。不过可以考虑使用border属性来实现。示例代码如下:
网站建设哪家好,找创新互联公司!专注于网页设计、网站建设、微信开发、重庆小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了柳北免费建站欢迎大家使用!
border-bottom:1px dashed #000;
这里的意思就是1px宽度的黑色虚线下边框。看起来就跟下划线一样的效果。
已知的方式有2种(纯样式):
1.用标签(div、span这些标签都可以)的边框线设置虚线来实现,比如在需要的位置插入div然后设置border-top(或者border-bottom):1px dashed #e5e5e5;(3个属性分别表示:1像素的边宽 虚线 颜色);
2.用hr,不过因为实现方式和方式一一样,比如:hr style="height:1px;border:none;border-top:1px dashed #e5e5e5;" /,但是这个标签在H5种已经被淘汰了,完全可以靠第一种来实现。第二种就当做是知识扩展
在CSS 中常见的边框(border) 属性有以下几种:
border-style
border-width
border-color
border-top-, border-left-, border-bottom-, border-right-
border
border-style
border-style属性指定边框的样式。以下的表格列出这个属性可能有的值,以及每一个值显现出来的结果。
border-width
border-width属性是用来设定边框的宽度。可用的值为thin (薄)、medium (中等)、thick (厚),或是一个数字。
border-color
border-color属性是用来设定边宽的颜色。
border-top-, border-left-, border-bottom-, border-right-
我们可以将方向(top -上、bottom -下、left -左、right -右)和样式、宽度、及颜色合起来而成为一个属性。举例来说, border-top-style属性就是用来设定上边框的样式。以下举几个例子:
border
若四边的边框属性都一样,那我们可以用一个border属性来描述,而不必四个边都描述一次。另外,我们可以在同一行一次宣告边框样式、边框宽度、以及边框颜色。
p {
border:#0000FF 5px solid;
}
那以下的HTML,
p用一行来宣布所有边框的属性/p
会显现出
border线型主要有:
1、dotted【点状】
2、solid【实线】
3、double【双实线】
4、dashed;【虚线】
实例一:如果一个CSS这样写:border-style:dotted solid double dashed; 出来的框就是:上边框是点状,右边框是实线,下边框是双线,左边框是虚线
实例二:如果一个CSS这样写:border-bottom:1px dashed #000000;出来的框就是:一条宽度为1像素的黑色下划虚线。
以此类推。多试试就知道什么效果了哦。
一个是border-bottom: 1px dotted #000; 黑色1像素点边框,这是块级元素
还有一种是缩写,abbr文本/abbr,这种是不是常规的CSS样式,而是缩写标签,但可以在内嵌元素上使用,外观是点下划线。
css有两种虚线形式,一种是dashed,一种是dotted;如:
div style="width:100px;height:100px;border:1px dashed red"/div
div style="width:100px;height:100px;border:1px dotted red"/div
效果图如下: