doubleyong
管理员
管理员
  • 最后登录2025-10-18
  • 发帖数1198
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:2866回复:0

border-radius 8个值时

楼主#
更多 发布于:2022-12-22 19:20
border-radius
正常的取值
border-radius: 4px;
border-radius: 4px 6px 6px 4px;

然而还可以这样用
#add {
 border-radius: 3px 1px 3px 2px / 6px 4px 1px 3px;
}


border-radius 的8个属性值,实现任意曲线边框
示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
        width: 100px;
        height: 100px;
        margin: 100px 100px;
        border: 2px solid red;
        /*        x轴 上1  右2  下3  左4/y轴上5 右6  下7   左8*/
        border-radius:5px 10px 15px 20px/15px 20px 30px 50px;}
    </style>
</head>
<body>
    <div></div>
</body>
</html>
如图:

图片:4.jpg



参考:
https://www.jianshu.com/p/71d2bc4e839e
https://blog.csdn.net/weixin_40624809/article/details/102892725


深入理解border-radius:
https://blog.csdn.net/wll_web/article/details/103872397
知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号