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>