CSS 支持

CSS（层叠样式表）是用来描述网页样式的语言，它为网页提供了丰富的样式效果。现代化的浏览器对 CSS 的支持越来越好，而且还提供了一些新奇的功能。本文将介绍一些在现代化浏览器中支持的 CSS 功能。

CSS3 功能

CSS3 是 CSS 的最新版本，新加入了很多功能。现代化浏览器已经支持 CSS3 的大部分功能。下面是一些 CSS3 功能：

圆角

CSS3 允许我们用 border-radius 属性来创建圆角。下面是一个例子：

.my-element {
  border-radius: 10px;
}

这个样式将会让元素的四个角变成圆角。

阴影

CSS3 允许我们用 box-shadow 属性来创建阴影。下面是一个例子：

.my-element {
  box-shadow: 2px 2px 2px #888888;
}

这个样式将会在元素的右下角创建一个向右下的阴影。

渐变

CSS3 允许我们用 background-image 属性来创建渐变。下面是一个例子：

.my-element {
  background-image: linear-gradient(to bottom, #ffffff, #888888);
}

这个样式将会给元素添加一个从上到下的黑白渐变。

动画

CSS3 允许我们用 @keyframes 规则来创建动画。下面是一个例子：

@keyframes my-animation {
  from { opacity: 0; }
  to { opacity: 1; }
}

.my-element {
  animation: my-animation 1s linear;
}

这个样式将会让元素在 1 秒钟内从透明度为 0 渐变到透明度为 1。

CSS 前缀

不同的浏览器对 CSS 的支持有所不同，所以我们需要用不同的 CSS 前缀来达到最佳的兼容性。下面是一些常见的 CSS 前缀：

• -webkit-：Chrome、Safari 和 Opera 浏览器
• -moz-：Firefox 浏览器
• -ms-：Internet Explorer 浏览器
• -o-：早期的 Opera 浏览器

下面是一个例子：

.my-element {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

这个样式将会让元素的四个角在 Chrome、Safari、Opera 和 Firefox 等浏览器中都变成圆角。

总结

CSS 提供了丰富的样式效果，现代化浏览器对 CSS 的支持也越来越好。我们可以利用 CSS3 中新增的功能来创建更加丰富的页面。而为了达到最好的兼容性，我们还需要用不同的 CSS 前缀来达到最佳的兼容性。