[分享]css3所有兼容写法

CSS3是一项新的技术，它为我们提供了许多新的功能和特性，包括动画、阴影、圆角、渐变和更多。然而，不同的浏览器可能会对CSS3的实现产生不同的结果，因此我们需要考虑使用所有兼容的写法。/ 圆角边框 /...

CSS3是一项新的技术，它为我们提供了许多新的功能和特性，包括动画、阴影、圆角、渐变和更多。然而，不同的浏览器可能会对CSS3的实现产生不同的结果，因此我们需要考虑使用所有兼容的写法。

/* 圆角边框 */
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;

/* 渐变 */
background: linear-gradient(to bottom right, red, blue);
background: -webkit-linear-gradient(to bottom right, red, blue);
background: -moz-linear-gradient(to bottom right, red, blue);
background: -ms-linear-gradient(to bottom right, red, blue);
background: -o-linear-gradient(to bottom right, red, blue);

/* 阴影 */
box-shadow: 5px 5px 2px #888888;
-webkit-box-shadow: 5px 5px 2px #888888;
-moz-box-shadow: 5px 5px 2px #888888;
-ms-box-shadow: 5px 5px 2px #888888;
-o-box-shadow: 5px 5px 2px #888888;

/* 动画 */
animation: myanimation 1s infinite;
-webkit-animation: myanimation 1s infinite;
-moz-animation: myanimation 1s infinite;
-ms-animation: myanimation 1s infinite;
-o-animation: myanimation 1s infinite;

/* 转换 */
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg); 

在这里，我们可以看到使用所有兼容的写法，我们可以确保在各种浏览器上都能够正确地显示CSS3的效果。