hr标签html样式,hr标签样式修改及美化(css的hr标签实现精美线条)
前言
工作中,经常会用到一些分割线,这些分割线平时一般都用div来模拟,记得当时ie浏览器hr标签样式修改经常有问题。随着时代的进步,技术的发展。目前hr标签可以大胆的使用在工作中了,且可以自定义出各种样式,当然,今天的hr样式你也可以同样用div实现,不过hr分割线更加语义化一点点。
渐变的
代码:
.hr_gradient1 {
border: 0;
height: 1px;
background: #333;
background-image: linear-gradient(to right, #ccc, #333, #ccc);
}
.hr_gradient2{
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
两边有修饰的
.hr-style-seven {
overflow: visible;
height: 30px;
border-style: solid;
border-color: black;
border-width: 1px 0 0 0;
border-radius: 20px;
}
.hr-style-seven::before {
display: block;
content: "";
height: 30px;
margin-top: -31px;
border-style: solid;
border-color: black;
border-width: 0 0 1px 0;
border-radius: 20px;
}
.hr-space-square {
border: 0;
color: #d0d0d5;
background: linear-gradient(currentColor, currentColor) no-repeat center;
background-size: calc(100% - 1.5em - 6px) 1px;
display: flex;
justify-content: space-between;
}
.hr-space-square::before,
.hr-space-square::after {
content: '';
display: block;
width: .75em; height: .75em;
transform: rotate(45deg);
box-sizing: border-box;
border: 1px solid;
margin: 3px;
}
复杂一点点的
.hr-double-arrow {
color: #d0d0d5;
border: double;
border-width: 3px 5px;
border-color: #d0d0d5 transparent;
height: 1px;
overflow: visible;
margin-left: 20px;
margin-right: 20px;
position: relative;
}
.hr-double-arrow:before,
.hr-double-arrow:after {
content: '';
position: absolute;
width: 5px; height: 5px;
border-width: 0 3px 3px 0;
border-style: double;
top: -3px;
background: radial-gradient(2px at 1px 1px, currentColor 2px, transparent 0) no-repeat;
}
.hr-double-arrow:before {
transform: rotate(-45deg);
left: -20px;
}
.hr-double-arrow:after {
transform: rotate(135deg);
right: -20px;
}
通用中间文字的
.hr-solid-content{
color: #a2a9b6;
border: 0;
font-size: 12px;
padding: 1em 0;
position: relative;
}
.hr-solid-content::before {
content: attr(data-content);
position: absolute;
padding: 0 1ch;
line-height: 1px;
border: solid #d0d0d5;
border-width: 0 99vw;
width: fit-content;
/* for IE浏览器 */
white-space: nowrap;
left: 50%;
transform: translateX(-50%);
}
文字带装饰
css代码同上,多了如下:
.hr-mid-border-content::after{
content: attr(data-content);
position: absolute;
padding: 4px 1ch;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
color: transparent;
border: 1px solid #d0d0d5;
}
波浪
.hr-wavy {
border: 0;
color: #d0d0d5;
height: .5em;
white-space: nowrap;
letter-spacing: 100vw;
padding-top: .5em;
}
.hr-wavy::before {
content: "\2000\2000";
/* IE浏览器实线代替 */
text-decoration: overline;
/* 现代浏览器 */
text-decoration: overline wavy;
}
阴影
.hr-shadow {
border: 0;
padding-top: 10px;
color: #d0d0d5;
border-top: 1px solid rgba(0,0,0,.1);
box-shadow: inset 0 10px 10px -10px;
}
.hr-twill {
border: 0;
padding: 3px;
background: repeating-linear-gradient(135deg, #a2a9b6 0px, #a2a9b6 1px, transparent 1px, transparent 6px);
}
疏密可以控制的虚线
.hr-dashed-fixed {
border: 0;
padding-top: 1px;
/* for IE浏览器 */
background: repeating-linear-gradient(to right, #a2a9b6 0px, #a2a9b6 4px, transparent 0px, transparent 10px);
/* for 现代浏览器 */
background: repeating-linear-gradient(to right, #a2a9b6 0 var(--dashed-filled, 4px), transparent 0 calc(var(--dashed-filled, 4px) + var(--dashed-open, 6px)));//传入变量来定义疏密
}
小结
本文非原创,主要参考互联网及张鑫旭大神博客。转载至本博客,共参考和查询。
hr标签html样式,hr标签样式修改及美化(css的hr标签实现精美线条)相关推荐
- html中hr标签有哪些属性,htmlhr标签的属性有哪些?HTMLhr标签的样式详解
html hr标签的属性有哪些?HTML hr标签的样式详解,本篇文章介绍了html中的hr标签的定义及其属性描述,还有关于html hr标签的样式使用的几种方法 html中hr标签定义和用法: 标签 ...
- devexpress 中的checkboxlist怎么设置间距_HTML中怎么设置h1的字体样式你知道吗?关于设置h1标签的样式详解
本篇文章主要为大家讲解了html中的h1标签的样式解析,但是如果不用css样式来做的话,那就只能在html4.01中显示了,所以我们还是尽快学习css层叠样式表吧,好了,现在让我们来说说这篇文章吧. ...
- php css去除h1样式,HTML中怎么设置h1的字体样式你知道吗?关于设置h1标签的样式详解...
本篇文章主要为大家讲解了html中的h1标签的样式解析,但是如果不用css样式来做的话,那就只能在html4.01中显示了,所以我们还是尽快学习css层叠样式表吧,好了,现在让我们来说说这篇文章吧. ...
- qt怎么设置标签背景图片_HTML中怎么设置h1的字体样式你知道吗?关于设置h1标签的样式详解...
本篇文章主要为大家讲解了html中的h1标签的样式解析,但是如果不用css样式来做的话,那就只能在html4.01中显示了,所以我们还是尽快学习css层叠样式表吧,好了,现在让我们来说说这篇文章吧. ...
- Foxmail新建自动标签功能在哪 如何给Foxmail收件人邮件设置自动标签
Foxmail邮件客户端软件,是中国最著名的软件产品之一,在Foxmail里面有很多比较好的功能,比如自动标签,那么,Foxmail新建自动标签功能在哪?如何给Foxmail收件人邮件设置自动标签呢? ...
- css中a标签中去掉下划线注意事项
需求文件 css中a标签中去掉下划线注意事项 对于css中a 标签去掉下划线有一个注意事项代码如下: <!DOCTYPE html> <html><head>< ...
- css中如何设置hr的样式?css hr标签多种样式(图文)
在对html网页进行美化的时候,肯定少不了要用的hr标签进行修饰页面,但默认的hr标签样式对页面的修饰起不到什么好的作用,有经验的前端工作者就会通过使用css样式来对hr标签进行一些美化的操作.那么如 ...
- css改变hr的默认样式
-----------笔记------------- 实现效果:改变默认标签<hr />的样式 改变<hr />的默认样式需要写成行内样式 <hr style=" ...
- 帆软V10.0爬坑之路(如何修改自定义图表块提示样式以及标签样式)
如何修改自定义图表块提示样式以及标签样式 在标签和提示内容的地方选择自定义(其他可通过HTML代码编写的地方同理);可直接在其中填写HTML代码,来进行样式控制,以及背景图片等自定义(需勾选HTML解 ...
- audio 上一首 下一首 自定义样式_HTML5中 audio标签的样式修改
2017年8月23日,台风"天鸽"的到来,带来了些风雨,也给平淡的上班生活带来了些乐趣. 今天做的一个小需求,就是要在网页上添加音频,html5属性 可以实现,用这个标签可以实现音 ...
最新文章
- matlab--矩阵运算
- python3初学者注意事项
- python接入excel_使用python将excel数据导入数据库过程详解
- Windows 下搭建 Ruby 开发环境
- 快速数论变换(NTT)
- 一些有趣的404错误设计
- 什么时候用到id和class?
- 获取用户上传的图片的本地路径实现方法,解决fakepath路径问题
- go如何实现图片拼接,文字书写
- 推挽电路介绍、设计与分析
- Python——类和实例
- 学习笔记2 - 利用元数据管理数据质量
- Android手机开发
- 2017计算机非全日制调剂,2017年非全日制硕士研究生调剂方案
- Android中FlowLayout的使用方法,监控布局大小并设置页面高度
- C++无法在头文件中定义string类数据
- txtv28pw河南某中学_河南省新乡市某中学2020届高三阶段性考试物理试卷
- HCIE-Cloud云计算认证考试心得
- 哈希表题目:验证外星语词典
- php 开启dcom,快速解决PHP调用Word组件DCOM权限的问题讲解