如何才能实现像蛋一样的边界半径
我能用css3实现这种图像风格吗?如何才能实现像蛋一样的边界半径
我已经设置边框的这种风格在
.image img {border-radius: 40% 60% 60% 40%/50%; }
,但我认为这是不正确的。
您可以创建一个伪elemnts类似的东西产生。首先要创建该形状,您可以使用border-radius
,然后可以为灰色区域添加较大的box-shadow
,为该蓝色阴影添加一个。
.egg {
position: relative;
overflow: hidden;
height: 400px;
width: 400px;
}
.egg:after {
content: '';
width: 250px;
position: absolute;
top: 0;
left: 0;
height: 200px;
margin: 50px;
transform: rotate(-135deg);
box-shadow: -7px -7px 0px 0px #67BEF9, 0px 0px 0px 400px #ECECEC;
border-radius: 204px 109px 106px 212px/125px 110px 110px 125px;
}
<div class="egg">
<img src="https://st.hzcdn.com/simgs/25e1d6580f5a3538_4-1972/traditional-staircase.jpg" alt="">
</div>
谢谢! :)但是当我尝试设置宽度400px(超过350)时,我无法保存此模型 –
您可以创建一个https://jsfiddle.net。 –
我无法创建jsfiddle。但你可以设置宽度:500px;和身高:450,尝试使用相同的形式? –
我会给你一个鸡蛋的小代码。它是由边界半径
#egg {
display:block;
width: 126px;
height: 180px;
background-color: red;
-webkit-border-radius: 63px 63px 63px 63px/108px 108px 72px 72px;
border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
}
<div id="egg"></div>
您可以使用任何图像与“背景图片”,并从该片段 –
是删除“背景色”,但我的图像是有点不同于鸡蛋,你可以看到我的形象:) :)谢谢:) –
<div style="height=;height: 505px;width: 655px;background-color: #ececec;">
<img src="test_img.png" height="500" width="650" style="border-top-left-radius: 100% 100%;border-top-right-radius: 100% 160%;border-bottom-left-radius: 135% 100%;border-bottom-right-radius: 50% 50%;">
</div>
试试这个,可能会有帮助 –
可以用剪辑属性从CSS3 –