CSS - 在定义的距离上将 div 的所有边缘淡化为透明

Question

我有一个带有纯色背景的 div，其中包含一个表单。我在这个表单周围设置了 50px 的填充，并希望将纯色淡出为透明，以根据像素变量查看背后的背景。例如，如果我希望从表单到 div 边缘的所有内容都淡出，我可以选择 50px。或 45。或 25 等等。

当前 div：

我希望它是什么样子：

这个 div 的大小是可变的（高度：auto;），所以不幸的是，不可能只用一张图片作为背景。

我已经尝试在 Fiddle 上使用线性渐变修复它，但我没有使用它们的经验，我想我刚刚取消了所有内容。

HTML：

<div class="formBackground">
  <form id="gform" method="POST" action="***">
    <input type="text" id="name" name="name" placeholder="Name" style="width: 100%; float: left;">
    <input type="text" id="email" name="email" placeholder="Email" style="width: 100%; float: left;">
    <input type="textarea" id="message" name="message" placeholder="Write your message here..." style="width: 100%; float: left;">
  </form>
</div>

CSS：

.formBackground {
    top: 0px;
    float: left;
    margin-left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: auto;
  background-image : linear-gradient(to bottom, 
                    rgba(55,54,51, 0), 
                    rgba(55,54,51, 1) 90%);
  background-image : linear-gradient(to left, 
                    rgba(55,54,51, 0), 
                    rgba(55,54,51, 1) 90%);
  background-image : linear-gradient(to top, 
                    rgba(55,54,51, 0), 
                    rgba(55,54,51, 1) 90%);
  background-image : linear-gradient(to right, 
                    rgba(55,54,51, 0), 
                    rgba(55,54,51, 1) 90%);
  padding-left: 50px;
    padding-top: 50px;
    padding-right: 50px;
    padding-bottom: 50px;
    margin-top: 100px;
    overflow: hidden;
    margin-bottom: 4.5em;
}

提前致谢！

Answer 1

我过去曾使用盒子阴影来实现这种效果。

  box-shadow: 0px 0px 25px 25px rgba(55,54,51, 1);

通过添加一个在任意方向平移 0 像素、散布距离为 25 像素、模糊半径为 25 像素的盒子阴影，使其成为您喜欢的 50 像素模糊。通过将边距更改为 50px 并使用top、right 等进行定位，您可以将其准确定位到您想要的位置。

HTML：

<div class="formBackground">
  <form id="gform" method="POST" action="***">
    <input type="text" id="name" name="name" placeholder="Name" style="width: 100%; float: left;">
    <input type="text" id="email" name="email" placeholder="Email" style="width: 100%; float: left;">
    <input type="textarea" id="message" name="message" placeholder="Write your message here..." style="width: 100%; float: left;">
  </form>
</div>

CSS：

.formBackground {
    height: auto;
    background-color : rgba(55,54,51, 1);
    overflow: hidden;
    margin: 50px;
    box-shadow: 0px 0px 25px 25px rgba(55,54,51, 1);
}

Answer 2

您应该在同一背景中组合所有渐变。您还需要为拐角使用一些径向渐变。

这是一个例子：

.box {
  width: 200px;
  height: 100px;
  background:
  /*center*/
  linear-gradient(rgba(55, 54, 51, 1),rgba(55, 54, 51, 1)) center/calc(100% - 40px) calc(100% - 40px) no-repeat,
  /*4 corners*/
  radial-gradient(circle at bottom left, rgba(55, 54, 51, 1) , rgba(55, 54, 51, 0) 70%) top right /20px 20px no-repeat,
  radial-gradient(circle at bottom right, rgba(55, 54, 51, 1) , rgba(55, 54, 51, 0) 70%) top left /20px 20px no-repeat,
  radial-gradient(circle at top right, rgba(55, 54, 51, 1) , rgba(55, 54, 51, 0) 70%) bottom left /20px 20px no-repeat,
  radial-gradient(circle at top left, rgba(55, 54, 51, 1) , rgba(55, 54, 51, 0) 70%) bottom right /20px 20px no-repeat,
  /*4 sides*/
  linear-gradient(to left, rgba(55, 54, 51, 0), rgba(55, 54, 51, 1)) right center/20px calc(100% - 40px) no-repeat,
  linear-gradient(to right, rgba(55, 54, 51, 0), rgba(55, 54, 51, 1)) left center/20px calc(100% - 40px) no-repeat,
  linear-gradient(to bottom, rgba(55, 54, 51, 0), rgba(55, 54, 51, 1)) top center/calc(100% - 40px)  20px no-repeat,
  linear-gradient(to top, rgba(55, 54, 51, 0), rgba(55, 54, 51, 1)) bottom center/calc(100% - 40px)  20px no-repeat;
}

<div class="box">
</div>

<div class="box" style="width:500px;">
</div>

<div class="box" style="height:200px;">
</div>

这是另一种带有 CSS 变量的语法，您可以在其中轻松调整颜色和距离：

.box {
  width: 200px;
  height: 100px;
  box-sizing:border-box;
  color:#fff;
  --i:55, 54, 51;
  --c:rgba(var(--i),1) , rgba(var(--i), 0);
  --d:20px;
  padding:var(--d);
  background-image:
  linear-gradient(rgba(var(--i), 1),rgba(var(--i), 1)),
  
  radial-gradient(circle at bottom left, var(--c)  70%),
  radial-gradient(circle at bottom right, var(--c) 70%),
  radial-gradient(circle at top right, var(--c) 70%),
  radial-gradient(circle at top left, var(--c) 70%),
  
  linear-gradient(to right, var(--c)),
  linear-gradient(to left, var(--c)),
  linear-gradient(to top, var(--c)),
  linear-gradient(to bottom, var(--c));
  
  background-size:
   calc(100% - 2*var(--d)) calc(100% - 2*var(--d)),
   
   var(--d) var(--d),var(--d) var(--d),var(--d) var(--d),var(--d) var(--d),
   
   var(--d) calc(100% - 2*var(--d)),var(--d) calc(100% - 2*var(--d)),calc(100% - 2*var(--d)) var(--d),calc(100% - 2*var(--d)) var(--d);
  background-position:center,
  
    top right,top left,bottom left,bottom right,
    
    right center, left center,top center, bottom center;
  background-repeat:no-repeat;
}

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

<div class="box" style="--d:40px;--i:0,20,70">
Some content
</div>


<div class="box" style="--d:10px;--i:255,0,0">
Some content
</div>