[分享]css3属性实例

CSS3是Web前端开发中不可缺少的一部分，它拥有许多强大的属性，使得页面的设计更加丰富多彩。下面我们来看一些CSS3属性实例。/ 1、盒子阴影 / .box { boxshadow: 5px 5px...

CSS3是Web前端开发中不可缺少的一部分，它拥有许多强大的属性，使得页面的设计更加丰富多彩。下面我们来看一些CSS3属性实例。

/* 1、盒子阴影 */
.box {
    box-shadow: 5px 5px 5px gray;
}

/* 2、文本阴影 */
.text {
    text-shadow: 2px 2px 2px gray;
}

/* 3、边框图像 */
.border {
    border-image: url(border.png) 30 30 round;
}

/* 4、背景渐变 */
.gradient {
    background: linear-gradient(to right, red, yellow, green);
}

/* 5、过渡效果 */
.transition {
    transition: all 1s ease-in-out;
}

/* 6、变形效果 */
.transform {
    transform: rotate(45deg);
}

/* 7、动画效果 */
@keyframes move {
    0% {transform: translateX(0);}
    50% {transform: translateX(100px);}
    100% {transform: translateX(0);}
}
.animation {
    animation: move 2s ease-in-out infinite;
} 

通过以上实例，可以看出CSS3拥有许多功能强大的属性，可以让我们在页面设计上更加灵活自由。我们应该多学习使用这些属性，丰富自己的设计技巧。