CSS Arch是否可以使用border-radius？
亚历克斯
我正在尝试仅使用CSS创建一个拱门。我研究了各种“插入边界半径”问题，但所有问题都显示了如何插入角点，而不是对象的中间部分。
我正在寻找一种方法来反转对象的中间，以创建一个像桥梁一样的拱门。
包含的示例图像显示了我正在尝试实现的目标。 
编辑：
该拱门的重要部分是将其放置在其他对象上。简单地将其淘汰不是解决方案，而只是一个临时的hack。有关更多信息，请参见下面的图像。
罗宾·惠特尔顿
您可以使用径向渐变来完成。我在JSFiddle上举了一个例子：http : //jsfiddle.net/17ohey9h/
基本思想是要有一个较大的覆盖图（将生成的内容用剪切到容器上overflow: hidden），然后为它提供径向渐变的背景以及过渡的硬停止点。我们可以通过将两个停靠点设置在同一位置，但透明度相反来做到这一点：
radial-gradient(ellipse at center, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%)
总体而言，您显然可以尝试各种颜色和位置。我还为此提供了W3C语法。您需要根据所需的浏览器支持的发布时间来添加旧版本。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
CSS border-radius：20px
- 2
CSS过渡移除border-radius属性
- 3
如何使用CSS border-radius创建直角？
- 4
是否可以使通过“ border-radius”修剪的边框无法点击？
- 5
是否可以使用条件CSS？
- 6
如何向下拉蚂蚁设计元素添加border-radius CSS属性？
- 7
根据兄弟姐妹的宽度动态设置CSS border-bottom-left-radius
- 8
CSS：IE 中的多个 bgs、bg clip 和 border-radius
- 9
一个人如何才能将CSS属性（如border-radius）与transitionables一起使用
- 10
border-radius和-webkit-border-radius之间的区别
- 11
Google Chrome Border Radius问题
- 12
CSS：在具有border-radius的链接上显示表格单元：错误显示的边框和多余的边距
- 13
是否可以使用JS / CSS反转png？
- 14
是否可以使用CSS 2.1旋转文本？
- 15
是否可以使用CSS获得轮廓文字效果？
- 16
是否可以使用CSS calc（）来计算宽度/高度比？
- 17
是否可以使用CodeIgniter从管理面板动态添加CSS
- 18
是否可以使用LESS操作CSS变量？
- 19
是否可以使用仅CSS的容器包装器？
- 20
是否可以使用CSS遮罩或剪切图像的形状？
- 21
是否可以使用情感生成CSS文件？
- 22
是否可以使用CSS translateX（100％）制作动画？
- 23
是否可以使用CSS创建弯曲的虚线？
- 24
是否可以使用CSS访问定位标记的文本？
- 25
是否可以使用仅CSS的容器包装器？
- 26
是否可以使用 javascript 更改实际的 css 文件？
- 27
border-radius在IE中创建轮廓
- 28
字体真棒：Fa Bars-Border Radius
- 29
带有Radius和Arrow的CSS Button，可能吗？
我来说两句