css中下划线和文字部分重叠且长度和文字自适应
发布网友
发布时间:2022-04-19 22:25
我来回答
共3个回答
懂视网
时间:2022-04-28 17:17
本篇文章给大家介绍一下css下划线和文字间距离的的设置方法,接下来我们来看看具体的内容。
在上一篇文章中我们介绍了关于css下划线的设置方法,但是设置出来的下划线感觉与文字之间距离太近,有时在网页中会显得不太美观,那么如何设置css下划线与文字之间的距离呢?本篇文章就来给大家介绍有关css下划线与文字之间距离的设置方法。
css中text-decoration属性设置出来的文字下划线不能够调整文字与下划线之间的距离,所以我们如果要调整下划线与文字之间的距离只能够使用border-bottom属性来设置文字下划线,下面我们就来看具体的实现方法。
我们设置css下划线与文字之间的距离需要用到的属性是padding-bottom和border-bottom
具体的代码如下:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
span{
border-bottom: 2px solid pink;
padding-bottom: 10px;
}
</style>
</head>
<body>
<span>
Gxlcms下划线距离</span>
</body>
</html>
效果如下:
从上图可以很容易就看出文字与下划线之间出现了一定的距离。
本篇文章到这里就全部结束了,更多内容大家可以关注Gxlcms相关教程栏目!!!
热心网友
时间:2022-04-28 14:25
方法一:text-decoration-skip指定覆盖关系
text-decoration-skip是与text-decoration相关的CSS3属性。
效果很不错,不过缺点在于目前只有Safari8+浏览器支持带-webkit-私有前缀的text-decoration-skip属性,且仅仅支持skip(默认值)和none两个值。
此方法是最原生的,但是由于兼容性问题,目前还不太合适。
方法二:使用border-bottom属性模拟
我觉得这是一个不错的想法,CSS博大精深,哈哈。^.^
内联元素虽然不支持垂直方向的margin属性,但是支持垂直方向的padding属性和border属性,并且,对原来的布局定位等没有任何影响。因此,配合padding,我们就可以很有效地调节下边框和文字下边缘的距离,实现我们最想要的的效果。(张老师的原话)
代码如下:
a {
text-decoration: none;
border-bottom: 1px solid;
}
这样写的有点在于border-bottom还有dashed属性,我们还可以创造虚线下划线 :P
a {
text-decoration: none;
border-bottom: 1px dashed;
}
效果图:金玉全王
方法三:使用box-shadow属性模拟
使用box-shadow的想法也是很棒的,其实动动脑子,CSS还有好多玩法。(●'◡'●)
直接上代码~
a {
text-decoration: none;
box-shadow: 0 1px;
}
这里box-shadow用了两个值,在这里解释一下:
box-shadow: h-shadow v-shadow blur spread color inset;
此处的两个值分别是 h-shadow 和 v-shadow。
h-shadow:水平阴影的位置。允许负值。
v-shadow:垂直阴影的位置。允许负值。
垂直阴影为1px于是就有了下划线的样子。
相比border-bottom属性,box-shadow的优势在于,即使我们把内联元素设置成display:inline-block,生成的下划线也不会对垂直对齐或者布局产生影响,但,如果是border-bottom,会增加元素的尺寸,可能就会影响元素的排列。
但是,box-shadow也有不足,一是兼容性,IE9+才支持,二是只能实线,不能虚线。
热心网友
时间:2022-04-28 15:43
方法一:text-decoration-skip指定覆盖关系
text-decoration-skip是与text-decoration相关的CSS3属性。
效果很不错,不过缺点在于目前只有Safari8+浏览器支持带-webkit-私有前缀的text-decoration-skip属性,且仅仅支持skip(默认值)和none两个值。
此方法是最原生的,但是由于兼容性问题,目前还不太合适。
方法二:使用border-bottom属性模拟
我觉得这是一个不错的想法,CSS博大精深,哈哈。^.^
内联元素虽然不支持垂直方向的margin属性,但是支持垂直方向的padding属性和border属性,并且,对原来的布局定位等没有任何影响。因此,配合padding,我们就可以很有效地调节下边框和文字下边缘的距离,实现我们最想要的的效果。(张老师的原话)
代码如下:
a {
text-decoration: none;
border-bottom: 1px solid;
}
这样写的有点在于border-bottom还有dashed属性,我们还可以创造虚线下划线 :P
a {
text-decoration: none;
border-bottom: 1px dashed;
}
效果图:金玉全王
方法三:使用box-shadow属性模拟
使用box-shadow的想法也是很棒的,其实动动脑子,CSS还有好多玩法。(●'◡'●)
直接上代码~
a {
text-decoration: none;
box-shadow: 0 1px;
}
这里box-shadow用了两个值,在这里解释一下:
box-shadow: h-shadow v-shadow blur spread color inset;
此处的两个值分别是 h-shadow 和 v-shadow。
h-shadow:水平阴影的位置。允许负值。
v-shadow:垂直阴影的位置。允许负值。
垂直阴影为1px于是就有了下划线的样子。
相比border-bottom属性,box-shadow的优势在于,即使我们把内联元素设置成display:inline-block,生成的下划线也不会对垂直对齐或者布局产生影响,但,如果是border-bottom,会增加元素的尺寸,可能就会影响元素的排列。
但是,box-shadow也有不足,一是兼容性,IE9+才支持,二是只能实线,不能虚线。