/* 圆角边框 */ div{ border-radius: 10px; } /* 渐变背景 */ div{ background: linear-gradient(to bottom, #FFFFFF 0%, #CCCCCC 100%); } /* 盒阴影 */ div{ box-shadow: 5px 5px 5px #888888; } /* 文字阴影 */ h1{ text-shadow: 2px 2px 2px #888888; } /* 旋转 */ div{ transform: rotate(30deg); } /* 动画 */ div{ animation: myanimation 2s infinite; } @keyframes myanimation { 0% { background-color: #FFFFFF; } 50% { background-color: #CCCCCC; } 100% { background-color: #FFFFFF; } }
圆角边框可以使图形更加流畅自然。渐变背景可以让页面看起来更加美观。盒阴影和文字阴影可以为元素增加明显的立体感。旋转和动画可以让页面更加活力。
当然,CSS3新增的功能不仅仅限于以上几种,还有很多新的选择器、伸缩布局等等。Web开发人员掌握CSS3的能力越强,就越有可能创建出更加出色的网页效果。