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

前端之家收集整理的这篇文章主要介绍了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.f2er.com/html/231711.html

猜你在找的HTML相关文章