CSS3图像的圆角和一个非常轻的椭圆形 [英] CSS3 image with round corners and a very light oval shape
问题描述
您好我希望在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;
}
和浏览器支持。
Hello I'm looking to build in CSS3 an image with round corners and a very light oval shape, like in this pic.
Not sure if it's possible and how. I know how to build a round image or an image with round corners, but this is a little different.
UPDATE Here is what I've done
.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 Here are the schematics of what I'm trying to achieve
Thanks
If perfect precision is what you want, I recommend mask-image
instead of border-radius
. It's much better suited for what you want.
To use your Illustrator-built(?) shape as a mask
in CSS, export it as SVG or PNG with transparent bg.
This will work in Chrome, Safari and Opera, but you need to use the prefixed -webkit-mask-image
. The property is in progress of being merged with CSS mask-image
which only applied to SVG, hence the current need for a prefix. For other browsers, you may choose the lesser precise border-radius
.
.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 and browser support.
这篇关于CSS3图像的圆角和一个非常轻的椭圆形的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!