我正在尝试使用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语法.您需要添加旧版本,具体取决于您所需的浏览器支持需要多长时间.
