html – 是否可以使用border-radius的CSS Arch？

我正在尝试使用CSS创建一个拱门.我已经研究了各种“ inset border-radius”问题,但它们都展示了如何嵌入角落,而不是对象的中间部分.

我正在寻找一种方法来反转对象的中间以创建像桥梁一样的拱形.

其中包括一个示例图像,以显示我正在尝试实现的那种事情.

编辑：

这个拱门的一个重要部分是它将被放置在其他对象上.简单地说出来不是一个解决方案,而只是一个临时的黑客攻击.有关详细信息,请参见下图.

解决方法

你可以用径向渐变来完成.我在JSfiddle上做了一个例子： http://jsfiddle.net/17ohey9h/

基本的想法是有一个大的叠加(生成的内容剪切到容器溢出：隐藏),然后给它一个径向渐变的背景,有一个硬停止过渡.我们可以通过在同一位置设置两个停靠点来实现此目的,但是具有相反的半透明度：

radial-gradient(ellipse at center,rgba(255,0) 0%,0) 50%,1) 50%,1) 100%)

你可以明显地使用颜色和位置来玩,一般的想法成立.我也只为此提供了W3C语法.您需要添加旧版本,具体取决于您所需的浏览器支持需要多长时间.

原文地址：https://www.jb51.cc/html/231711.html