css3入门案例

CSS3是在CSS2的基础上进行了扩展，并增加了许多新的特性。下面我们将通过一个简单的入门案例来介绍CSS3的基本用法。

首先，我们先在HTML文件中添加以下内容：

<div class="box"></div>

接下来，在CSS文件中添加以下代码：

.box {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
}

上面的代码中，我们为.box类添加了宽度、高度、背景颜色和圆角的属性。其中border-radius属性是CSS3新增的，可以让我们创建圆角效果。

接着，我们在HTML文件中添加以下内容：

<div class="box2"></div>

然后，在CSS文件中添加以下代码：

.box2 {
width: 100px;
height: 100px;
background-color: blue;
box-shadow: 10px 10px 5px grey;
}

上面的代码中，我们为.box2类添加了宽度、高度、背景颜色和阴影的属性。其中box-shadow属性也是CSS3新增的，可以让我们创建阴影效果。

最后，在HTML文件中添加以下内容：

<div class="box3"></div>

然后，在CSS文件中添加以下代码：

.box3 {
width: 100px;
height: 100px;
background-color: green;
transition: width 1s, height 1s;
}
.box3:hover {
width: 200px;
height: 200px;
}

上面的代码中，我们为.box3类添加了宽度、高度、背景颜色和过渡效果的属性。其中transition属性也是CSS3新增的，可以让我们创建过渡效果。当鼠标悬停在.box3上时，宽度和高度会逐渐变大。

以上就是一个简单的CSS3入门案例，希望可以帮助大家更好地了解CSS3的基本用法。

查看更多关于css3入门案例的详细内容...