html - div 两侧的径向渐变(但为负)
问题描述
这是codepen链接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, 0) 0%,
rgba(195, 50, 80, 1) 25%,
rgba(195, 50, 80, 1) 50%,
rgba(195, 50, 80, 1) 75%,
rgba(0, 0, 0, 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,0) 0%,
rgba(0,0,0,0) 10%, /* This 10% value can be adjusted to change the radius of the gradient */
rgba(195, 50, 80, 1) 50%,
rgba(0,0,0,0) 100%
),
radial-gradient(
circle at 100%, /* Position on the right edge */
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 10%,
rgba(195, 50, 80, 1) 50%,
rgba(0,0,0,0) 100%
);
}
<div class="bg--red-gradient">
<h2>Lorem ipsum lorem ipsum <br>lorem ipsum lorem ipsum.</h2>
</div>
推荐阅读
- django - 访问 Django html 模板中的模型字段
- php - 在 PHP 中保存和恢复一个类作为一种优化技术?
- ios - 对于每行有两个卡片单元的 UI,哪种布局更好?
- java - 不能用Hibernate调用PostgreSQL的11个存储过程
- javascript - 无法使用 selenium webdriver(Java)单击“确认电子邮件”链接
- angular - 是否可以通过一些修改在另一个组件中使用一个组件
- php - 1类中的多个sql语句
- apache - Apache 2.4 + Windows XP 上的多个 PHP,带有一个核心 API
- android-studio - 如何与签名的 apk 一起构建调试 apk
- android - TimePicker.OnTimeChangedListener() 无需任何更改即可触发