CSS3实战：第一天

学习圆角

学习使用纯CSS3画实心圆、上、下、左、右半圆。

C33代码

/* 实心圆 */
.circle {
    width: 100px;
    height: 100px;
    background-color: #9da;
    border-radius: 50px;
}

/* 实心上半圆 */
.upCircle {
    width: 100px;
    height: 50px;
    background-color: #9da;
    border-radius: 50px 50px 0 0;
}

/* 实心下半圆 */
.downCircle {
    width: 100px;
    height: 50px;
    background-color: #9da;
    border-radius: 0 0 50px 50px;
}

/* 实心左半圆 */
.leftCircle {
    width: 50px;
    height: 100px;
    background-color: #9da;
    border-radius: 50px 0 0 50px;
}

/* 实心右半圆 */
.rightCircle {
    width: 50px;
    height: 100px;
    background-color: #9da;
    border-radius: 0 50px 50px 0;
}

对于上面的CSS代码，我们首先需要明白，要绘制圆角，我们需要使用border-radius来实现。它有两种设置值的方式：

• 直接设置一个值，表示左上角、右上角、右下角、左下角都是这个值
• 分别设置左上角、右上角、右下角、左下角的值

画实心圆：

我们直接设置宽与高相等，然后再需要设置四个角的值都为宽的一半。

画实心上半圆：

上半圆，其宽等于高的2倍，左上角和右上角需要设置为宽的一半。

画实心下半圆

下半圆，其宽等于高的2倍，左下角和右下角需要设置为宽的一半，其它两个角不需要处理。

画实心左半圆

左半圆，其高度等于宽度的2倍，左上角和左下角需要设置为高度的一半，其它两个角不需要处理。

画实心右半圆

右半圆，其高度等于宽度的2倍，右上角和右下角需要设置为高度的一半，其它两个角不需要处理。

然后在HTML中添加测试标签：

<div class="circle">圆角</div><br>
<div class="upCircle">实心上半圆</div><br>
<div class="downCircle">实心下半圆</div><br>
<div class="leftCircle">实心左半圆</div><br>
<div class="rightCircle">实心右半圆</div>

学习阴影

box-shadow是向盒子添加阴影，支持添加一个或者多个，如果添加多个阴影，只需用逗号隔开即可。其语法为：

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

其中，方括号内的是可省略的。

// 外阴影
.box-shadow-outset {
    width: 100px;
    height: 100px;
    /*
    // 设置x向右偏移4px，y向下偏移4px，阴影模糊半径6px，阴影颜色为黄色
    // 默认为外阴影
    */
    box-shadow: 4px 4px 6px yellow;
    background-color: red;
}

// 内阴影
.box-shadow-inset {
    width: 100px;
    height: 100px;
    /*
    // 设置x向右偏移4px，y向下偏移4px，阴影模糊半径6px，阴影颜色为黄色
    // 默认为外阴影，这里使用`inset`来设置为内阴影
    */
    box-shadow: 4px 4px 6px yellow inset;
    background-color: green;
}

// 多个阴影
.box-shadow-multi {
    width: 100px;
    height: 100px;
    background-color: blue;
    /*
    // 这里有两个外阴影。
    // 设置x向右偏移4px，y向下偏移4px，阴影模糊半径6px，阴影颜色为黄色
    // 设置x向右偏移10px，y向下偏移4px，阴影模糊半径6px，阴影颜色为红色
    // 多个阴影之间，使用逗号隔开*/
    box-shadow: 4px 4px 6px yellow, 10px 10px 6px red;
}

想看效果，添加如下代码：

<div class="box-shadow-outset"></div><br>
<div class="box-shadow-inset"></div><br>
<div class="box-shadow-multi"></div><br>