目录

圆角

---

通过 CSS3，能够创建圆角边框，向矩形添加阴影替代之前的切背景图处理

圆角

• 作用：为元素添加圆角边框

• 单个边定义

  • 语法： border-*-radius

  • border-top-left-radius 定义了左上角的弧度 border-top-right-radius 定义了右上角的弧度 border-bottom-right-radius 定义了右下角的弧度 border-bottom-left-radius 定义了左下角的弧度

• 常用取值

  • px

  • 百分比

    • 分别相对于宽高计算（非内容）

  • 不允许负值

• 简写border-radius

  • 语法

    • 空格 隔开

      • 四个值：左上角、右上角、右下角、左下角 水平和垂直半径

      • 三个值：左上角、右上角和左下角，右下角

      • 两个值：左上角与右下角、右上角与左下角

      • 一个值： 四个圆角值相同

    • ""隔开

      • 水平半径（1-4）/垂直半径（1-4）

      • 规则同上

•  兼容 

  

 .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px 0px 0px 100px;
            /* 四个角都是10px */
            border-radius: 10px;
            /* 左上和右下是10px  右上和左下是20px */
            border-radius: 10px 20px;
            /* 左上10 右上和左下20px 右下30px */
            border-radius: 10px 20px 30px;
            /* 四个值 顺时针 */
            border-radius: 10px 20px 0px 40px;
            /* 一个角的弧度 右上角 */
            border-top-right-radius: 40px;
            /* 左下角 */
            border-bottom-left-radius:50px;

            /* %写法 切线切宽高的一半！！！ */
            border-radius: 50%;
            /* 四个角都是一样的弧度 水平切线40px/垂直切线80px */
            /* border-radius: 40px/80px; */
            /* 当你只写一个角的特殊弧度的时候 水平切线  垂直切线 */
            border-top-left-radius: 40px 80px;

            border-radius: 10px 20px 30px 40px/40px 30px 20px 10px;


        }