css 设置 一条两端渐变浅色的 亮白色线

最新推荐文章于 2024-01-19 12:26:49 发布
最新推荐文章于 2024-01-19 12:26:49 发布
阅读量2.1k 收藏 2
点赞数 1
分类专栏： CSS 和JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dyp330/article/details/96300285
版权

1./**一条两端渐变浅色的 亮白色线**/

.btnLine {

background-image: linear-gradient(90deg, rgba(237,240,244,0.00) 11%, #EEF1F5 35%, #EEF1F5 64%, rgba(238,241,243,0.00) 86%);

width: 290px;

height: 1px;

}

凌珞
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 任意两个点连接成一条线
12-12
css 任意两个点连接成一条线，没有使用到canvas。纯css实现。这个只是一个demo。您可以参考
css设置边框渐变色
10-22
使用css设置按钮边框的渐变色；使用css设置按钮边框的渐变色
css样式，两端变淡的渐变直线
最新发布
chabaimgg的博客
01-19 450
【代码】css样式，两端变淡的渐变直线。
如何css写出很淡的线,CSS淡出水平规则/线条风格的div效果，没有图像
weixin_35662019的博客
08-04 367
好的，我已经回答了我自己的问题，但我已经阅读了Stackoverflow论坛，这似乎是可以接受的(如果不是真的鼓励！)所以...HTML：TESTCSS：#wrap{overflow:hidden;height:10px;width:600px;height:20px;margin:auto;margin-top:200px;}#gradient{height:20px;width:580px;m...
css字体设置为白色,css怎么将字体设置成白色
weixin_32955259的博客
08-03 2179
css将字体设置成白色的方法：可以通过使用color属性来指定字体的颜色，如【color: white】或【color: #fff】。color属性用于指定文本的颜色，颜色值可以是颜色名称或十六进制值。环境：本文适用于所有品牌的电脑。(学习视频分享：css视频教程)相关属性：Color属性指定文本的颜色。语法：color : value;属性值：color_name：规定颜色值为颜色名称的颜色(比...
CSS属性: 阴影 轮廓 渐变
weixin_34233856的博客
07-13 424
注: 本文摘自 宁静致远 - CSDN / 但愿人长久 千里共婵娟 - CSDN 阴影 使用box-shadow属性可以为元素添加阴影效果, 比如 box-shadow: h-shadow v-shadow blur spread color inset; 关键字 是否必须 作用 值 h-s...
CSS 竖线颜色渐变
weixin_33909059的博客
09-21 782
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>渐变的竖线</title></head><style>.div1 {height: 500px;border-left: 2px solid;border-image: -...
css3给盒子加一个白色闪光效果（超简单）
TTKalpa的博客
12-04 1485
用简单的CSS的代码给盒子添加一个炫酷的白色闪光:hover效果。
CSS设置DIV背景色渐变显示兼容IE/火狐/谷歌
09-25
标题中的“CSS设置DIV背景色渐变显示兼容IE/火狐/谷歌”指的是在网页设计中，使用CSS来实现一个DIV元素的背景颜色渐变效果，并确保这种效果在不同的浏览器，包括Internet Explorer（IE）、Firefox和Google Chrome...
CSS3细线条圆形波纹动画特效
07-14
为了实现整个"CSS3细线条圆形波纹动画特效"，我们可以将以上知识点结合起来，创建一个HTML元素，为其设置合适的径向渐变背景，然后应用动画。在实际项目中，这个元素可能需要在用户点击或其他交互事件触发时显示动画...
商务企业网站CSS模板45-企业 简洁 白色 线条 蓝色 渐变.rar
02-23
"商务企业网站CSS模板45-企业 简洁 白色 线条 蓝色 渐变.rar" 是为商务企业设计的一款网站模板，它体现了现代网页设计的趋势和最佳实践。 首先，CSS（Cascading Style Sheets）是一种样式表语言，用于描述HTML或XML...
白色简约皮肤的css代码分享
Charles梦想家
03-18 774
该简约皮肤是博主结合别人的CSS皮肤代码，所采用的白色简约款皮肤CSS代码，在设置里设置博客皮肤类型为moonlightlink，在下方的CSS代码区使用即可。其中参考了哪些博主的CSS代码已经忘记了，部分参考过https://www.cnblogs.com/coding-farmer/，在此只能感谢其他博主的CSS代码分享。 @font-face { font-family: 'Font...
HTML 发光线条,CSS3 线条发光效应实验
weixin_39928940的博客
06-03 561
CSS语言：CSSSCSS确定html {height: 100%;background: -webkit-linear-gradient(#813b97, #463c96);background: linear-gradient(#813b97, #463c96);}@-webkit-keyframes progress1 {0% {-webkit-transform: scalex(0);tr...
css3发光线条旋转加载特效
JYX的博客
11-02 2828
css3发光线条旋转加载特效 css3属性制作两个发光线条相反旋转加载动画特效。 html部分 &lt;div class="loader"&gt; &lt;div class="face"&gt; &lt;div class="circle"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="
css渐变
weixin_46352558的博客
08-09 1945
1、 中间向两边渐变。
CSS设置背景颜色 拼接 (一半黑一半白) 条纹 渐变
hinataneji的博客
01-06 7777
CSS设置网页背景颜色 拼接 (一半黑一半白) 条纹 渐变 1.拼接 (一半黑一半白) html代码如下 <style> html{ height: 100%; background-image: linear-gradient(to bottom, #000 50%, #FFF 0); } </style> 2.条纹 很简单的 就是高度改为25% 想要条纹更密就把高度减小就好了 html代码如下 <style> ht
css3 实现线条两端渐变效果
tancailian的博客
03-06 589
css渐变实现中间宽两边细的平滑效果
CSS：实现动态流光线条效果/动态流光线条颜色渐变效果
热门推荐
smm的博客
04-25 1万+
使用纯CSS实现动态流光线条效果（拖尾透明）
02-CSS 字体、文本属性
GBL_csdn的博客
05-15 109
1、颜色值：颜色名称、RGB数值、十六进制数值颜色名称：black === 黑色、white === 亮白、red === 大红 ......​RGB数值：rgb(0~255, 0~255, 0~255)RGBA数值：rgba(0~255, 0~255, 0~255,[0.0 ~ 1.0]) Alpha 透明度​十六进制数值：#000000、#ffffff0、1、2、3、4、5、6、7、8、9和字母A、B、C、D、E、F（a、b、c、d、e、f）表示，其中:A~F表示10~15​。
css 高斯模糊两端渐变
09-22
要实现CSS高斯模糊两端渐变效果，你可以使用伪元素::before和::after，将它们分别设置在背景的两端，然后使用背景渐变和高斯模糊来达到效果。 下面是一个示例代码： ``` section::before { content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); filter: blur(10px); } section::after { content: ''; position: absolute; top: 0; right: 0; width: 50%; height: 100%; background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); filter: blur(10px); } ``` 这段代码会在section元素的两端添加伪元素::before和::after，并使用背景渐变和高斯模糊来实现两端的渐变效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值