将圆角半径/圆角应用于元素的内容而不是填充答案

【问题标题】：Apply corner radius / rounded corners to an element's content NOT padding将圆角半径/圆角应用于元素的内容而不是填充
【发布时间】：2020-05-14 12:01:09
【问题描述】：

我有一个要添加圆角半径（圆角）的元素，但仅限于内容本身 - 而不是填充。 border-radius 似乎没有任何选项允许这样做（这个名字很有意义）。

即圆下图蓝色部分的角，而不是绿色部分。

由于某些原因，我不能将另一个 div 包裹在元素周围作为填充。

更新
上下文是元素是拖放元素的放置区域。当另一个元素被拖动并悬停在其顶部时，元素的内容（蓝色区域）会改变颜色。我想要一个大的填充，以便放置区域非常大，而只有较小的内容区域在悬停时会改变颜色。

【问题讨论】：

您是否有要求不能有 0 的填充？
我现在更新了问题来解释这一点 - 本质上，我想要一个大的透明区域用于元素，既是元素又是元素的内容。

标签： html css sass rounded-corners cornerradius

【解决方案1】：

除了边界之外，没有办法将边界半径应用于任何东西。您最好的办法是在您的内容周围的<div> 中放置一个<span>。跨度与它们所在的任何 div 内联，跨度本身对样式的影响应该最小，然后你可以按照你想要的方式使用边框半径。

<div><span class="content">content goes here</span></div>

【讨论】：

我在原始问题中添加了更多上下文 - 我感觉此解决方案不适用于此上下文？
我在这里做了一个例子：jsfiddle.net/vjutwacs。但是我在外面放了一个 div 让它工作。在这种情况下这是否行不通？

【解决方案2】：

播放背景。这是基于previous answer的想法

.box {
  width:150px;
  height:150px;
  margin:10px;
  border:10px solid yellow;
  padding:10px;
  border-radius:10px; 
  background:
   radial-gradient(farthest-side at bottom right,transparent 98%,green 100%) top left    /25px 25px  content-box,
   radial-gradient(farthest-side at top    right,transparent 98%,green 100%) bottom left /25px 25px  content-box,
   radial-gradient(farthest-side at bottom left ,transparent 98%,green 100%) top right   /25px 25px  content-box,
   radial-gradient(farthest-side at top    left ,transparent 98%,green 100%) bottom right/25px 25px content-box,
   linear-gradient(blue,blue) content-box,
   linear-gradient(green,green) padding-box;
  background-repeat:no-repeat;
}

<div class="box">

</div>

<div class="box" style="padding:50px;">

</div>

蓝色是内容区域，绿色是填充区域，黄色是边框。

【讨论】：