十天精通CSS3

未分类

一、边框

1-1 边框圆角

1-1-1 参数

border-radius:5px 6px 7px 8px

• 第一个参数表示左上角
• 第二个参数表示右上角
• 第三个参数表示右下角

• 第四个参数表示左下角

  border-radius: 10px 四个角都是10px
  border-radius:10px 20px 左上角10px; 右下角为10px; 右上角30px; 左下角为30px;
  border-radius:10px 20px 30px 左上角为10px; 右上角20px; 左下角为20px; 左下角为30px;

1-1-2 实例

1-1-2-1 圆形

.div1{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    border-radius: 50px;
}

<div class='div1'></div>

1-1-2-2 半圆

.div2{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    border-radius: 50px 50px 0px 0px;
}

<div class='div2'></div>

1-1-2-3 自定义1

.div2{
    width: 150px;
    height: 50px;
    border: 1px solid red;
    border-radius:  0px 25px 25px 0px;
}

<div class='div2'></div>

1-1-2-3 自定义2

.div2{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    border-radius:  25px;
}

<div class='div2'></div>