具有线性渐变的背景边框半径

【问题标题】：Background border radius with linear gradient具有线性渐变的背景边框半径
【发布时间】：2018-07-29 17:55:47
【问题描述】：

我正在尝试制作 2 个背景，如下图所示。我正在尝试使用线性渐变和边框半径，但我得到的只有 90º 边框并且不知道如何更改边框。

这里是代码

background-image: linear-gradient(left, #e3e3e3, #e3e3e3 30%, transparent 50%, transparent 100%), radial-gradient(circle at top left, #f00,#e3e3e3);
background-image: -webkit-linear-gradient(left, #e3e3e3, #e3e3e3 30%, transparent 30%, transparent 100%);
border-top-right-radius: 36px;
border-bottom-right-radius: 36px;

【问题讨论】：

标签： html css linear-gradients

【解决方案1】：

你可以这样做：

.box {
  padding:20px;
  display:inline-block;
  font-size:30px;
  background:
    linear-gradient(blue,blue) left/100px 100% no-repeat,
    radial-gradient(circle at left,blue 44%,transparent 45%) 100px 0/74px 74px no-repeat;
}

<div class="box">
 Some content here 
</div>

您还可以引入 CSS 变量以获得更多控制：

.box {
  padding:20px;
  display:inline-block;
  font-size:30px;
  background:
    linear-gradient(blue,blue) left/var(--p,50px) 100% no-repeat,
    radial-gradient(circle at left,blue 44%,transparent 45%) var(--p,50px) 0/74px 74px no-repeat;
}

<div class="box">
 Some content here 
</div>
<div class="box" style="--p:20px">
 Some content here 
</div>
<div class="box" style="--p:150px">
 Some content here 
</div>

【讨论】：