hr换行符的颜色设置

简介: 项目需求有一个2px的换行符,颜色是淡灰色的,这里面可能有一些不一样的设置,需要明白。 说到颜色变化,大家首先想到的都是color,但是color一般都是针对字体颜色的,线条需要用background-color, 但是单纯的将背景色设为灰色是不够的,线条还是黑色的,我们需要给线条一个高度,也就是我们需要的2px 这样设置完后,在浏览器中可以看到线条变粗了,而且原来的

项目需求有一个2px的换行符,颜色是淡灰色的,这里面可能有一些不一样的设置,需要明白。

说到颜色变化,大家首先想到的都是color,但是color一般都是针对字体颜色的,线条需要用background-color,

但是单纯的将背景色设为灰色是不够的,线条还是黑色的,我们需要给线条一个高度,也就是我们需要的2px

这样设置完后,在浏览器中可以看到线条变粗了,而且原来的黑色好像还是存在的

其实,hr是有默认的border的,我们需要将它的边框去掉,设为border:none

<div style='background-color:#f7f7f7;height:2px;border:none;''>

好了  解决

目录
相关文章
|
5月前
layUI table 内容超出宽度怎么换行显示,而不是显示省略号
layUI table 内容超出宽度怎么换行显示,而不是显示省略号
115 0
|
5月前
|
前端开发
如何去掉bootstrap table中表格样式中横线竖线
如何去掉bootstrap table中表格样式中横线竖线
48 0
|
7月前
|
前端开发
css只改变input输入框光标颜色
css只改变input输入框光标颜色
|
8月前
|
前端开发
bootstrap设置表格列宽及换行
简述bootstrap设置表格列宽及换行
|
9月前
|
程序员 数据安全/隐私保护
input输入时的边框样式去除
input输入时的边框样式去除
input输入时的边框样式去除
|
Web App开发 前端开发
去掉谷歌默认的input textarea边框样式
谷歌浏览器Chrome基于WebKit开源浏览器引擎,自然能够通过相关的一切方法自定义设置浏览器的默认状态。谷歌浏览器Chrome安装之后,大家应该都留意到所有的表单都会添加黄色边框特效。在某些时候这些特效还是很不错的,但是当网站本身就已经对于表单样式有一定的设计时,这种默认表单样式就会让人觉得套样了!
121 0
控制label标签的宽度,不让它换行 label标签左对齐
控制label标签的宽度,不让它换行 label标签左对齐
|
小程序
小程序填充文本怎么换行
小程序填充文本怎么换行
115 0
|
前端开发
解决多行文本换行省略显示失效的问题
解决多行文本换行省略显示失效的问题
408 0
解决多行文本换行省略显示失效的问题
|
前端开发
css3 新属性 text-overflow 实现截取多余文字内容 以省略号来代替多余内容
我们在设计网站的时候有时会遇到这样一个需求:因为页面空间大小的问题,需要将多余的文字隐藏起来,并以省略号代替,类似这样的效果: 做到这样的效果,我们不仅需要运用到css3的新属性 text-overflow ,该属性的作用就是设置一下被隐藏文本的展示形式(例如隐藏文本用……展示),除此之外还需要用到属性 white-space 使文字不换行,以及使用属性 overflow:hidden 隐藏多余的文字 接下来我们就来分步讲解一下这几个属性的应用吧
266 0
css3 新属性 text-overflow 实现截取多余文字内容 以省略号来代替多余内容