CSS3小布 |css 漂亮的单选框

/* 圆角 */
.border-radius {
border-radius: 5px;
}
/* 阴影 */
.box-shadow {
box-shadow: 5px 5px 5px #888;
}
/* 渐变 */
.gradient {
background: linear-gradient(to bottom, #fff, #000);
}
/* 旋转 */
.transform {
transform: rotate(30deg);
}
/* 动画 */
.animation {
animation: move 2s linear infinite;
}
@keyframes move {
0% {
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
100% {
transform: translateX(0);
}
}

以上代码展示的是圆角、阴影、渐变、旋转以及动画这几种CSS3小布特性，当然这还仅仅是冰山一角，CSS3还有很多新特性值得大家去了解。相信通过更加灵活的CSS3技术，大家可以创造出更加丰富、美观、有趣的网页效果。