具有边框半径和框阴影的曲线效果答案

【问题标题】：Curved Effect With border-radius and box-shadow具有边框半径和框阴影的曲线效果
【发布时间】：2016-03-12 01:36:10
【问题描述】：

对于所有 css 形状创建者：知道如何仅使用 css 制作这种曲线吗？

【问题讨论】：

CSS 不是创建这种波浪形图案的正确工具。不要使用 CSS。而是尝试 SVG。如果您仍然想使用 CSS，那么您可以在这些线程中找到一些帮助 - one、two。

【解决方案1】：

一种可能性（如果您想继续使用纯 CSS）是使用径向渐变

你需要一个在左侧，中心向上，另一个在右侧，中心向下

.test {
  border: solid 1px blue;
  width: 600px;
  height: 50px;
  background-repeat: no-repeat;
  background-image: radial-gradient(circle at 50% -563px, red 600px, transparent 600px), 
                    radial-gradient(circle at 50% 603px, transparent 600px, red 600px);
  background-size: 50% 40px;
  background-position: left bottom, right bottom;
}

&lt;div class="test"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

我会建议用油漆来制作你的波浪。将其保存为图片并将其作为背景从您的 CSS 中的 div 中。我认为它更容易并且具有相同的效果。

【讨论】：