我正在使用线性渐变创建背景图像。如何为每个线性渐变添加圆 Angular 。
请提供不修改html的解决方案(不能使用多个div)
.myStyle {
height:500px;
width: 900px;
background-image:
linear-gradient(lightgrey , blue),
linear-gradient(lightgrey , blue),
linear-gradient(lightgrey , blue),
linear-gradient(lightgrey , blue);
background-repeat: no-repeat;
background-size:
100px 40px,
500px 60px,
250px 50px,
250px 60px;
background-position:
0 0,
0 80px,
0 160px,
0 220px;
}
<div class="myStyle"></div>
最佳答案
不太确定您的目标是什么,但如果您希望纯色渐变具有半径,您可以使用多个线性渐变和径向渐变构建它。
这是我使用 CSS 变量轻松定义位置、大小和半径的示例。这是你的渐变之一。您需要为所有渐变重复代码并调整不同的值。
.box {
--w:200px; /*Gradient width*/
--h:100px; /*Gradient height*/
--r:10px; /*Gradient radius*/
--x:50px; /*Gradient position x*/
--y:40px; /*Gradient position y*/
--c:grey; /*Gradient color*/
margin:0;
height:100vh;
background:
radial-gradient(farthest-side,var(--c) 98%,transparent 100%) var(--x) var(--y) / calc(2*var(--r)) calc(2*var(--r)),
radial-gradient(farthest-side,var(--c) 98%,transparent 100%) calc(var(--x) + var(--w) - 2*var(--r)) var(--y) / calc(2*var(--r)) calc(2*var(--r)),
radial-gradient(farthest-side,var(--c) 98%,transparent 100%) var(--x) calc(var(--y) + var(--h) - 2*var(--r)) / calc(2*var(--r)) calc(2*var(--r)),
radial-gradient(farthest-side,var(--c) 98%,transparent 100%) calc(var(--x) + var(--w) - 2*var(--r)) calc(var(--y) + var(--h) - 2*var(--r)) / calc(2*var(--r)) calc(2*var(--r)),
linear-gradient(var(--c),var(--c)) calc(var(--x) + var(--r)) var(--y) / calc(var(--w) - 2*var(--r)) var(--h),
linear-gradient(var(--c),var(--c)) var(--x) calc(var(--y) + var(--r)) / var(--w) calc(var(--h) - 2*var(--r));
background-repeat:no-repeat;
width:300px;
height:200px;
display:inline-block;
border:1px solid;
}
<div class="box"></div>
<div class="box" style="--w:80px;--r:30px;--c:red;"></div>
<div class="box" style="--h:80px;--r:40px;--x:5px;--y:5px;--c:blue"></div>
关于css - 带圆 Angular 的线性渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57242376/