CSS下划线与文字间距，下划线粗细以及下划线颜色的设置 |
您所在的位置：网站首页 › html中横线怎么设置字体颜色不一样 › CSS下划线与文字间距，下划线粗细以及下划线颜色的设置 |
CSS下划线与文字间距，下划线粗细以及下划线颜色的设置
|
最开始的时候了解下划线的属性是： text-decoration:underline; 1但是，很遗憾的是，对于设计做的下划线用浏览器默认属性样式很难调整，使用这个属性并不能调整下划线与文字的间距，而且对于下划线的颜色也不好调整，而使用这个标签也是同样的效果。 例子： 默认下划线 .test-underline { text-decoration: underline; }用text-underline 属性设置下划线 用;u;标签设置下划线 效果图： 后来在多次测试中，发现可以很方便解决问题，span使用padding-bottom和border-bottom不会影响整体的布局。 在文字外加上span标签，再给span标签设置padding-bottom和border-bottom属性的值，padding-bottom可以很方便调整下划线与文字的间距，比如padding-bottom: 5px,下划线的颜色与粗细用border-bottom就可以改变，比如：border-bottom: 2px solid #f89,如下： span { padding-bottom: 5px; border-bottom: 2px solid #f89; }利用这种方法，发现下面这种下划线很容易制作下划线，简单例子： 完整代码： 用span制作下划线 body { padding: 0; margin: 0; font-family: "Microsoft Yahei"; } ul { list-style: none; padding-left: 0; margin: 0; } /*清除浮动*/ .clearfix { *zoom: 1; } .clearfix:before,.clearfix:after { display: table; line-height: 0; content: ""; } .clearfox:after { clear: both; } .nav { width: 600px; } .nav li { float:left; } .nav a { box-sizing: border-box; display: inline-block; text-align: center; width: 100px; height: 50px; color: #fff; padding: 12px 5px; background: #424a58; text-decoration: none; cursor: pointer; } .nav a.active>span , .nav a:hover>span { /*关键代码*/ padding-bottom: 5px; border-bottom: 2px solid #fff; } 套装模板 标题 图片 背景图 卡片 分割线 关注和原文 名片 其他 贴纸 布局 零件效果图： 通过span设置下划线的关键代码： .nav a.active>span , .nav a:hover>span { padding-bottom: 5px; border-bottom: 2px solid #fff; }改变下划线间距和颜色，也不影响整体布局： .nav a.active>span, .nav a:hover>span { padding-bottom: 9px; border-bottom: 2px solid #48C2F9; }
完整代码： 用span制作下划线 body { padding: 0; margin: 0; font-family: "Microsoft Yahei"; } ul { list-style: none; padding-left: 0; margin: 0; } /*清除浮动*/ .clearfix { *zoom: 1; } .clearfix:before,.clearfix:after { display: table; line-height: 0; content: ""; } .clearfox:after { clear: both; } .nav { width: 600px; } .nav li { float:left; } .nav a { box-sizing: border-box; display: inline-block; text-align: center; width: 100px; height: 50px; color: #fff; padding: 12px 5px; background: #424a58; text-decoration: none; cursor: pointer; } .nav a.active>span , .nav a:hover>span { padding-bottom: 8px; border-bottom: 2px solid #fff; } 套装模板 标题 图片 背景图 卡片 分割线 关注和原文 名片 其他 贴纸 布局 零件《CSS揭秘》中也有一些下划线自定义的方法： （1）用border-bottom a[href]{ border-bottom: 1px solid gray; text-decoration: none; }（2）用display:inline和line-height一起来调整与文本得间隙 display: inline-block; border-bottom: 1px solid gray; line-height: .9;（3）还可以用box-shadow来模拟下划线 box-shadow: 0 -1px gray inset;例子： 《CSS揭秘》自定义下划线 body { font-family: "Microsoft Yahei"; } a { text-decoration: none; color: #000; } .underline1 { border-bottom: 1px solid gray; } .underline2 { display: inline-block; border-bottom: 1px solid gray; line-height: .9; } .underline3 { box-shadow: 0 -1px gray inset; }用border-bottom 来自定义下划线 用display:inline-block 和 line-height 调整下划线间距 用box-shadow 模拟下划线 效果如下： 其他资源：(下面这两个网址测试时发现在火狐可以，谷歌不行) (1)http://dabblet.com/gist/58f3d67d5bb0f8338776 (2)http://dabblet.com/gist/c9184f634e9e9efde6e8 转载自：http://blog.csdn.net/ann295258232/article/details/52691369 |
【本文地址】
今日新闻 |
推荐新闻 |