Question

您好，我正在尝试使用CSS来创建切出效果，但是它非常粗糙。因此，我对外观进行了修饰：

我用于剪切效果的CSS是：

section.services .item-2 .text::before{
content:'';
position:absolute;
width:100%;
height:2em;
left:0;
right:0;
top:-2em;
margin:0 auto;
background:radial-gradient(ellipse 60% 2em at 50% 0,transparent 100%,#fff 0);
z-index:-1
}

如果有人可以帮助我使它变得平滑，那就太好了！

Answer 1

解决此问题的一种方法是增加渐变的模糊度，因此我们将其应用于.text：before

background: radial-gradient(ellipse 60% 2em at 50% 0,transparent 98%, #fff 100%);

这里是fiddle，您可以尝试使用透明百分比来增加/减少平滑度。

Answer 2

代替:: ::之前的放射状背景，而使用带有重新定位的边框半径：

对于第2项-预先存在的CSS减去径向背景：

section.services .item-2 .text::before{
   content:'';
   position:absolute;
   width:100%;
   height:2em;
   left:0;right:0;top:-2em;margin:0 auto;
/* background:radial-gradient(ellipse 60% 2em at 50% 0, transparent 100%,#fff 0); */
z-index:-1}

为项目2提供白色背景，让:: ::在黑色背景前靠着并降低高度，以使其与项目1和3正确对齐。

section.services .item-2{
  background: white;
  box-sizing:border-box;
  height:163px;
}

将文字与第1项和第3项中的文字平齐。

section.services .item-2 .text{
  padding-top:1px;
}

底部边界半径，大于100％，并向左分流以创建正确的曲率：

section.services .item-2 .text::before{
  content:'';
  position:absolute;
  top:-4em;
  transform:translateX(-5%);
  width:110%;
  height:2em;left:0;right:0;margin:0 auto;
  display:block;
  background:#000;
  border-radius: 0 0 100% 100%;
}

更新的jsfiddle：http://jsfiddle.net/n0p25hq8/7/

平滑的CSS径向渐变切口

2 个答案: