css小实战案例 |css实用实例

代码1：
/*让背景渐变色*/
body{
background: -webkit-linear-gradient(left, #c9d6ff, #e2e2e2);
background: linear-gradient(to right, #c9d6ff, #e2e2e2);
}
代码2：
/*在文字周围添加阴影*/
p{
text-shadow: 1px 1px #c9d6ff;
}
代码3：
/*美化链接*/
a{
text-decoration: none;
color: #c9d6ff;
font-weight: bold;
border-bottom: 1px dotted #c9d6ff;
}
代码4：
/*带圆角的按钮*/
.button{
border-radius: 20px;
background-color: #c9d6ff;
border: none;
padding: 10px 20px;
color: white;
font-size: 18px;
}
代码5：
/*让图片环绕文字*/
img{
float: left;
margin-right: 20px;
}
代码6：
/*响应式设计*/
@media only screen and (max-width: 600px){
body{
background-color: #c9d6ff;
}
}

以上这些CSS小实战案例只是冰山一角，如果你想掌握CSS的更多应用，可以继续学习各种CSS的属性和方法，不断实践和尝试，相信你会越来越懂得如何优雅地使用CSS来打造美丽和实用的网页。