在对 html 网页进行美化的时候, 肯定少不了要用的 hr 标签进行装饰, 很多人都会直接使用 hr 标签, 但也有大部份新人只会使用 hr 标签, 并不会对 hr 标签进行一些美化的操作, hr 标签进过 CSS 样式进行美化后, 也是非常好看实用的.
默认的 hr 标签是有边框的, 放大后可以清晰的看见
1, 所以, 设置 hr 样式的第一步就是去除边框
- hr{
- border: none;
- }
2, 然后就可以根据自己的需要设置样式了
- hr{
- border: none;
- border-top:1px dashed #0066CC;
- }
3, 更多样式如下:
- // CSS
- .hr0{
- height:1px;border:none;border-top:1px dashed #0066CC;
- }
- .hr1{
- height:1px;border:none;border-top:1px solid #555555;
- }
- .hr2{
- height:3px;border:none;border-top:3px double red;
- }
- .hr3{
- height:5px;border:none;border-top:5px ridge green;
- }
- .hr4{
- height:10px;border:none;border-top:10px groove skyblue;
- }
- // HTML
- <hr class="hr0" />
- <hr class="hr1" />
- <hr class="hr2" />
- <hr class="hr3" />
- <hr class="hr4" />
以及渐变的 hr 样式
- hr{
- border: none;
- height: 2px;
- background-image: linear-gradient(to right, rgba(0, 0, 0, .01),
- rgba(0, 0, 0, .4), rgba(0, 0, 0, .01))
- }
本文来自 css3 答疑 https://www.html.cn/qa/css3/ 栏目, 欢迎学习!
来源: http://www.css88.com/qa/css3/15977.html