css3修饰练习案例 |css填充父窗体

/* 实例一：文字阴影 */
p {
text-shadow: 2px 2px #ccc;
}
/* 实例二：圆角边框 */
.box {
border-radius: 10px;
border: 2px solid #ccc;
}
/* 实例三：渐变背景 */
.background {
background: linear-gradient(to bottom, #ccc, #fff);
}
/* 实例四：旋转和缩放 */
.logo {
transform: rotate(30deg) scale(1.5);
}
/* 实例五：动画效果 */
.animate {
animation: move 2s infinite alternate;
}
@keyframes move {
0% { transform: translate(0, 0); }
100% { transform: translate(100px, 100px); }
}

以上是五个使用CSS3实现的修饰练习案例，每个案例都有注释说明作用。在实际开发中，大家可以将这些效果结合起来使用，创造出更加复杂且炫酷的效果。