微信小程序如何实现边角化

微信小程序如何实现边角化

  • border-radius的基础用法
    • border-radius的进阶用法

border-radius的基础用法

属性: border-radius
用法一: border-radius:20px (默认4个边角都是20px);
用法二: border-radius:40px 30px 20px 10px;(分别表示左上,右上,右下,左下的边角值);

border-radius的进阶用法

以border-bottom-left-radius:10px 20px;为例;
border-radius所设计的边角都是规则的圆形的一部分,若我们需要设计的不是规则圆形,则需要用到该语句。该语句代表左下角的圆角度,数字越大则弯曲的更严重,所以左侧的弯曲度大于底部,所以边角就不是规则的圆形了。

你可能感兴趣的:(微信小程序如何实现边角化,css3,css)