定义HR的一些基本样式

最新推荐文章于 2023-09-19 12:33:52 发布

原创最新推荐文章于 2023-09-19 12:33:52 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS

javascript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何使用CSS样式来创建不同效果的水平线，包括两头渐变透明、纺锤形、右边渐变透明、左边渐变透明、立体效果和钢针效果，通过调整FILTER属性实现各种视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、两头渐变透明：
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#987cb9 SIZE=3>

--------------------------------------------------------------------------------

2、纺锤形：
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=2)" width="80%" color=#987cb9 SIZE=10>

--------------------------------------------------------------------------------

3、右边渐变透明：
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=1)" width="80%" color=#987cb9 SIZE=3>

--------------------------------------------------------------------------------

4、左边渐变透明：
<HR style="FILTER: alpha(opacity=0,finishopacity=100,style=1)" width="80%" color=#987cb9 SIZE=3>

--------------------------------------------------------------------------------

5、立体效果：
<HR style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#987cb9,direction:145,strength:15)" width="80%" color=#987cb9 SIZE=1>

--------------------------------------------------------------------------------

6、钢针效果：
<HR style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#987cb9,strength=10)" width="80%" color=#987cb9 SIZE=1>

--------------------------------------------------------------------------------

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

静静想我

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

html基础教程之分析总结一下＜li＞和＜hr＞的样式定义

前端基础入门学习线路

02-21

2941

希望对大家有所帮助。　　li {list-style-image: url(images/disc.gif);} 　　li的这个样式定义是将列表项目使用图片来代替显示的小圆点。当然您也可以显示成其它效果，详细请参阅下面的定义: 　　列表项目效果的CSS定义　　*list-style-type: circle(可换成自己想要的样式);　列表项目样式　　disc :　　　　　CSS1　...

css中如何设置hr的样式？css <hr>标签多种样式（图文）

lin123_00的博客

05-11

1万+

在对html网页进行美化的时候，肯定少不了要用的hr标签进行修饰页面，但默认的hr标签样式对页面的修饰起不到什么好的作用，有经验的前端工作者就会通过使用css样式来对hr标签进行一些美化的操作。那么如何在css中给hr标签设置样式呢？本章就给大家介绍css设置hr标签的几种样式。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）一、hr的是什么意思简单来说，hr就是html页面上的一条水平分隔

参与评论您还未登录，请先登录后发表或查看评论

react-reactsparkline实现简单微线图sparklines的React组件

08-15

react-sparkline - 实现简单微线图(sparklines)的React组件

CSS三种漂亮的＜hr＞水平线样式

热门推荐

美奇软件开发工作室

03-11

4万+

hr.style-one {/*内嵌水平线*/width:80%;margin:0 auto;border: 0;height: 0;border-top: 1px solid rgba(0, 0, 0, 0.1);border-bottom: 1px solid rgba(255, 255, 255, 0.3);}hr.style-two {/*透明渐变水平线*/width:80%;margin...

html中一条横线代码怎么写_Vue VS React 在开发同一记账项目中二者的对比

weixin_39704314的博客

11-21

310

Vue VS React 在开发同一记账项目两者的对比目录1.项目介绍2.Vue VS React 数据绑定3.Vue VS React 组件化4.Vue VS React 外部数据Props5.Vue VS React CSS支持6.Vue VS React 全局状态管理7.Vue VS React 路由Router8.Vue VS React 总结1.项目介绍柠檬记账是一个移动端的本地记账项目...

css定义hr水平线条

longxiaobin00的博客

08-12

713

text-align:左对齐 color:线条颜色 border-top:上边框线 border-bottom:下边框线 height:线条包括边框的总高度显示效果为上中下三条线

如何定义html hr 样式(多种效果)

09-25

1. 两头渐变透明的HR样式是通过设置FILTER属性的alpha滤镜来实现的，其中opacity参数定义了起始透明度，finishopacity定义了结束透明度，style参数定义了渐变的类型。此效果让水平线的两端从完全不透明渐变到完全...

hr 水平线样式示例代码

11-30

本文将深入探讨`<hr>`标签的不同属性及其在创建水平线样式时的应用，以及如何通过CSS来进一步定制水平线的外观。首先，基础的`<hr>`标签没有设置任何样式时，通常会默认生成一条简单的、薄薄的横线。例如： ```...

一根横线怎么画

z466459262的专栏

05-25

307

把一个li的地边框给显示出来 #sidebar ul li.line{ border-bottom:1px solid #666; ---画一根横线 margin-left:20px; -----左边缩短20px margin-right:20px; height:50px; -----这样这根线就离上面有一段间距了 }...

在html中怎么给hr写样式,css hr怎么设置样式？

weixin_31264565的博客

05-31

2674

在对html网页进行美化的时候，肯定少不了要用的hr标签进行装饰，很多人都会直接使用hr标签，但也有大部份新人只会使用hr标签，并不会对hr标签进行一些美化的操作，hr标签进过CSS样式进行美化后，也是非常好看实用的。css hr怎么设置样式？默认的hr标签是有边框的，放大后可以清晰的看见1、所以，设置hr样式的第一步就是去除边框hr{border: none;}2、然后就可以根据自己的需要设置样...

hr标签html样式,hr标签样式修改及美化（css的hr标签实现精美线条）

weixin_29238147的博客

06-22

2477

前言工作中，经常会用到一些分割线，这些分割线平时一般都用div来模拟，记得当时ie浏览器hr标签样式修改经常有问题。随着时代的进步，技术的发展。目前hr标签可以大胆的使用在工作中了，且可以自定义出各种样式，当然，今天的hr样式你也可以同样用div实现，不过hr分割线更加语义化一点点。渐变的代码：.hr_gradient1 {border: 0;height: 1px;background: #33...

React Svg 大量点、线、移动、添加等处理一点思考

yf2800z的专栏

06-18

960

最近公司需要对目标移动标点，适合react进行开发的很少，找了多种都会有各式各样的问题。以G6为基础的Canvas处理，对宽高进行了现在，当宽高到达一定的限度将直接罢工，同样数据量上去了，也是死的不要不要的。 jsplumb也是个不错的选择，然而当数据达到一定量后，画圆点是执行的局部刷新，然而线的处理确实全局刷新，这个就有点伤了，几千根线就卡死的不要不要的。 GooFlow就是那个放...

使用React封装一个车票半圆分割线

weixin_45240168的博客

03-19

269

半圆分割线使用场景卡券车票机票超市小票等等这些使用场景近几年在移动端非常常见，显而易见效果是不错的，最近做移动端时，遇到了这种场景，就学了一下，发现so easy，在学之前是带有恐惧的，看着就高级，而且还麻烦，就下意识地逃避，说的好听点称“知难而退”，明事理，但并不推荐，知难而退的确可以舒服一时，但逃得了和尚，逃不了庙，以后还是会遇见的，记得有个人说过，你越担心什么，它就越会发生 . 更不要说技术上的阻挠了，技多不压身嘛，各位都清楚，谁不想拥有非常NB的技术，我天天都在想，甚至做白日

div和div之间画横线_如何在两个div之间画一条线？

weixin_39820185的博客

12-20

1367

I'm currently trying to draw a diagonal line between the bottom right corner of one div to the top right corner of another. If possible, I would like to do it without jQuery. Is this possible?解决方案This...

react-flow基础使用及dagre库的使用

https://ligo100.cn 小何博客欢迎访问。

07-11

7313

最近项目中需要用到拓扑图的展示，最开始选用的是antv的拓扑图组件。antv组件虽然此很方便，但是在布局的时候总是会有莫名其妙的bug，然后自己也想法去解决（看前辈经验、官方issue），最后还是不能解决。于是更换了组件库，也就是我们今天的主角：react-flow。React Flow 是一个基于 React 的用于构建可视化流程图和图形编辑器的库。它提供了一个灵活的、可扩展的组件集合，使开发者可以轻松地创建交互式的流程图和图形编辑器应用。

html hr渐变色,HTML HR color用法及代码示例

weixin_39979489的博客

06-16

1467

DOM HR color属性用于设置或返回元素的color属性的值。用法:它返回HR颜色属性。hrobject.color设置HR颜色属性。hrobject.color="value"属性值：color_name:它使用颜色名称保存文本颜色。例如：“red”。hex_number:它使用彩色十六进制代码保存文本颜色。例如：“#0000ff”。rgb_number:它使用rgb代码保存文本颜色。例如...

react使用内联css样式的注意点