CSS3实现曲线阴影和翘边阴影

CSS3中提供了box-shadow属性用于实现阴影效果，但是默认情况下生成的阴影是直线阴影，如果需要实现曲线阴影或者翘边阴影，可以使用一些特殊的css技巧。

实现曲线阴影

要实现曲线阴影，需要使用radial-gradient()函数来生成一个圆形渐变背景，然后再利用background-clip属性将渐变限定在元素内部。

.curve-shadow {
  background-image: radial-gradient(circle at 50px 0, transparent 10px, rgba(0, 0, 0, 0.5) 20px);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-clip: content-box;
}

上面的代码中，我们首先生成了一个从透明到半透明黑色的圆形渐变背景，然后使用background-clip属性将渐变限定在元素的内容区域内，从而让阴影呈现出曲线形状。

实现翘边阴影

要实现翘边阴影，需要使用pseudo-element（伪元素）和transform属性，首先创建一个带有伪元素的元素，然后为伪元素添加阴影，并使用transform属性将伪元素旋转一定的角度。

.bend-shadow {
  position: relative;
}
.bend-shadow::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  transform: rotate(-3deg);
  z-index: -1;
}

上面的代码中，我们为元素创建了一个伪元素，在伪元素上使用box-shadow属性生成了矩形阴影，然后使用transform属性将伪元素旋转-3度，使阴影呈现出翘边的效果。

以上就是CSS3实现曲线阴影和翘边阴影的完整攻略，希望对您有所帮助。