如何解决div 两侧的径向渐变但为负
所以,我想为渐变实现这种效果,但我不知道如何实现。
这是代码笔链接 https://codepen.io/christmastrex/pen/vYmyZWR
这是我的代码
<div class="bg--red-gradient">
<h2>Lorem ipsum lorem ipsum <br>lorem ipsum lorem ipsum.</h2>
</div>
.bg--red-gradient {
margin: 0 auto;
text-align: center;
color: #fff;
max-width: 600px;
padding: 10px 50px;
background: linear-gradient(
90deg,rgba(0,0) 0%,rgba(195,50,80,1) 25%,1) 50%,1) 75%,0) 100%
);
}
我的代码的问题是渐变在末端不是径向的。有什么帮助吗?
解决方法
这可以通过两个径向渐变来实现,每个渐变都逐渐淡出以避免重叠:
.bg--red-gradient {
margin: 0 auto;
text-align: center;
color: #fff;
max-width: 600px;
padding: 10px 50px;
background:
radial-gradient(
circle at 0%,/* Position on the left edge */
rgba(0,0) 0%,rgba(0,0) 10%,/* This 10% value can be adjusted to change the radius of the gradient */
rgba(195,50,80,1) 50%,0) 100%
),radial-gradient(
circle at 100%,/* Position on the right edge */
rgba(0,rgba(195,0) 100%
);
}
<div class="bg--red-gradient">
<h2>Lorem ipsum lorem ipsum <br>lorem ipsum lorem ipsum.</h2>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。