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屋！