css3 渐变两边透明中间高亮 linear-gradient()

最新推荐文章于 2025-06-17 16:53:05 发布

weixin_42220130

最新推荐文章于 2025-06-17 16:53:05 发布

阅读量8.6k

点赞数 7

CC 4.0 BY-SA版权

分类专栏：前端 css3 文章标签： css 渐变透明线条边框

原文链接：https://www.cnblogs.com/fmixue/p/8309883.html#top

前端同时被 2 个专栏收录

42 篇文章

订阅专栏

css3

13 篇文章

订阅专栏

本文介绍了一种使用CSS创建动态线性渐变背景的方法，通过调整不同颜色的透明度和位置，实现视觉上丰富的效果。从完全透明到特定颜色的渐变过渡，为网页设计增添了独特的风格。

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

在这里插入图片描述

<div class="linear"></div>
.linear{
            width:100%;
            height:2px;
            background: linear-gradient( 
            to right, 
            rgba(0,0,0,0) 0%, 
            rgba(0,0,0,0) 10%, 
            rgba(35,198,200,0.3) 20%, 
            rgba(35,198,200,0.4) 30%, 
            rgba(35,198,200,0.5) 40%, 
            rgba(35,198,200,0.8) 50%,
            rgba(35,198,200,0.5) 60%, 
            rgba(35,198,200,0.4) 70%, 
            rgba(35,198,200,0.3) 80%, 
            rgba(0,0,0,0) 90%,
            rgba(0,0,0,0) 100%)
        }

转载请注明：https://www.cnblogs.com/fmixue/p/8309883.html#top