咸鱼慧
新手
新手
  • 最后登录2020-08-19
  • 发帖数1
阅读:6126回复:0

[css]border自定义角度

楼主#
更多 发布于:2019-02-17 20:07
自定义角度
例如……


border-radius: 50px / 100px; /* 水平半径, 垂直半径 */
……相当于:


border-top-left-radius: 50px 100px;
border-top-right-radius: 50px 100px;
border-bottom-right-radius: 50px 100px;
border-bottom-left-radius: 50px 100px;
这种技术是特别有用,当你需要模拟一个平缓的,冗长的曲线,而不是一个通用的圆角。例如,下面的代码允许我们稍微变形一个正方形形状,模拟出更多卷纸一样的效果。




.box {
    width: 200px; height: 200px;
    background: #666;
 
    border-top-left-radius: 15em 1em;
    border-bottom-right-radius: 15em 1em;
 
}

描述:border-radius

图片:`)I7BQ1YY5SFQR7NXF2~`LH.png

border-radius
游客


返回顶部

公众号

公众号