Question

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

请提供不更改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>

Answer 1

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

这里是一个示例，其中我使用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>

Answer 2

最干净的方法实际上可能是使用svg代替css-gradients。

您将其作为data-uri加载到background-image属性中。
要制作圆角，可以使用rx元素的ry和<rect>属性。
要制作渐变，可以使用svg的<linearGradient>元素。

.mystyle {
  height: 900px;
  width: 500px;
  background-image: url("data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='500' height='900' viewBox='0 0 500 900'><defs><linearGradient id='blue-grad' gradientTransform='rotate(90)'><stop stop-color='lightgrey' offset='0%'/><stop stop-color='blue' offset='100%'/></linearGradient></defs><rect x='0' y='0' width='100' height='40' rx='15' fill='url(%23blue-grad)'/><rect x='0' y='80' width='500' height='60' rx='15' fill='url(%23blue-grad)'/><rect x='0' y='160' width='250' height='50' rx='15' fill='url(%23blue-grad)'/><rect x='0' y='220' width='250' height='60' rx='15' fill='url(%23blue-grad)'/></svg>");
  background-size: cover;
  background-repeat: no-repeat;
}

/*
  SVG Image unminified:
  
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="900">
  <defs>
    <linearGradient id="blue-grad" gradientTransform="rotate(90)">
      <stop stop-color="lightgrey" offset="0%"/>
      <stop stop-color="blue" offset="100%"/>
    </linearGradient>
  </defs>
  <rect x="0" y="0" width="100" height="40" rx="15" fill="url(#blue-grad)"/>
  <rect x="0" y="80" width="500" height="60" rx="15" fill="url(#blue-grad)"/>
  <rect x="0" y="160" width="250" height="50" rx="15" fill="url(#blue-grad)"/>
  <rect x="0" y="220" width="250" height="60" rx="15" fill="url(#blue-grad)"/>
</svg>
*/

<div class="mystyle"></div>

Answer 3

也许可以尝试这种方法，而不是使一个div输出多个渐变框？

.myStyle {
  width:150px;
  height:100px;
  background:linear-gradient(black,purple);
  border-radius:20px;
}

<div class="myStyle"></div>

Answer 4

尝试添加let a = new THREE.Vector3(0, 0, 0) let b = new THREE.Vector3(100, 100, 0) let c = new THREE.Vector3(50, 100, 0) let geometry = new THREE.PlaneGeometry(a.x - b.x, a.y - b.y) a.normalize(); b.normalize(); c.normalize(); var quaternion = new THREE.Quaternion(); quaternion.setFromUnitVectors(a, b); var euler = new THREE.Euler(); euler.setFromQuaternion(quaternion); geometry.rotateX(euler.toArray()[0]) geometry.rotateX(euler.toArray()[1]) geometry.rotateX(euler.toArray()[2]) var plane = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( {color: "red", side: THREE.DoubleSide} ) ); scene.add( plane );

border-radius

带圆角的线性渐变

4 个答案: