时间戳

首页 > 解决方案 > 带圆角的线性渐变

css - 带圆角的线性渐变

问题描述

我正在使用线性渐变创建背景图像。如何为每个线性渐变添加圆角。

请提供解决方案，无需对 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>

标签： csslinear-gradients

解决方案

不太确定你的目标是什么，但如果你想要纯色渐变具有半径，你可以使用多个线性渐变和径向渐变来构建它。

这是我使用 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>

推荐阅读