标签:code absolute hid 效果 latex sla 实例 最大 背景
一、border-radius 最大值100%
/* border-radius的最大值是100% */ .block { width: 100px; height: 100px; border: 1px solid red; /* border-radius: 10px 10px 100% 100%; */ border-radius: 10px 10px 200px 200px; }
二、使用大圆拼凑更多边角效果示例:
注:微信抢红包页面背景效果可以使用这种方式
css代码:
.block { width: 200px; height: 200px; border: 1px solid red; border-radius: 10px; margin: 100px 0px 0px 100px; position: relative; overflow: hidden; } .blocktop { width: 200%; height: 200%; border: 1px solid blue; border-radius: 50%; margin-top: -150%; margin-left: -50%; background: blue; position: relative; overflow: hidden; } .blocktop .blockInner { width: 50%; height: 25%; position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); } .blocktop img { width: 100%; }
html的结构:
<div class="block"> <div class="blocktop"> <div class="blockInner"> <img src="http://beijing.gongjuji.net/imgdata/small/e6e7b778-0e0e-452f-80aa-f95f94690fab.jpg" alt=""> </div> </div> </div>
显示效果:
更多:
标签:code absolute hid 效果 latex sla 实例 最大 背景
原文地址:https://www.cnblogs.com/tianma3798/p/11976390.html