html – CSS3图像,圆角和非常浅的椭圆形状

概述您好,我正在寻找在 CSS3中构建一个圆角和非常浅的椭圆形图像,就像在这张照片中一样. 不确定是否可能以及如何.我知道如何建立圆形图像或圆角图像,但这有点不同. UPDATE 这就是我所做的 .round{ background-color:red; width:100px; height:100px; border-top-left-radius: 45px 40 您好,我正在寻找在 CSS3中构建一个圆角和非常浅的椭圆形图像,就像在这张照片中一样.

不确定是否可能以及如何.我知道如何建立圆形图像或圆角图像,但这有点不同.

UPDATE
这就是我所做的

.round{    background-color:red;    wIDth:100px;    height:100px;    border-top-left-radius: 45px 40px;    border-top-right-radius: 45px 40px;    border-bottom-left-radius: 45px 40px;    border-bottom-right-radius: 45px 40px;}

http://jsfiddle.net/7t1z3hxf/9/

UPDATE2
以下是我想要实现的原理图

谢谢

解决方法 如果您想要完美的精度,我建议使用mask-image而不是border-radius.它更适合你想要的东西.

要在Illustrator中使用Illustrator构建的(？)形状作为遮罩,请将其导出为带透明bg的SVG或PNG.

这适用于Chrome,Safari和Opera,但您需要使用前缀-webkit-mask-image.该属性正在与仅应用于SVG的CSS mask-image合并,因此当前需要前缀.对于其他浏览器,您可以选择较小的精确边界半径.

.round{ -webkit-mask-image: url(yourshape.png); -webkit-mask-size: contain; -webkit-mask-position: center center; /* ... border-radius as fallback */}

Learn more about CSS Masking和浏览器支持.

总结

以上是内存溢出为你收集整理的html – CSS3图像,圆角和非常浅的椭圆形状全部内容，希望文章能够帮你解决html – CSS3图像,圆角和非常浅的椭圆形状所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。