[分享]css3支持下列新属性

CSS3是一种最新的CSS标准，它带来了许多新的属性和功能，让我们更加灵活和方便地设计网页，一些在CSS2中缺乏的能力被添加了进来，我们在这里列举了一些新属性：/ borderradius属性可以使元...

CSS3是一种最新的CSS标准，它带来了许多新的属性和功能，让我们更加灵活和方便地设计网页，一些在CSS2中缺乏的能力被添加了进来，我们在这里列举了一些新属性：

/* border-radius属性可以使元素的边角变为圆角 */
.rounded {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}

/* box-shadow属性可以添加元素的阴影效果 */
.shadowed {
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  padding: 10px;
}

/* text-shadow属性可以为文本添加阴影效果 */
.textshadow {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

/* transform属性可以旋转、缩放和倾斜元素 */
.transformed {
  transform: rotate(20deg) scale(1.2, 1.2) skew(10deg, 10deg);
}

/* transition属性可以控制元素的动画过度效果 */
.transitioned {
  transition: all 0.3s ease-in-out;
}

/* @font-face属性可以自定义字体 */
@font-face {
  font-family: 'CustomFont';
  src: url('fonts/CustomFont.ttf');
}

/* rgba()函数可以让你使用透明度 */
.transparent {
  background-color: rgba(255, 255, 255, 0.5);
}

/* media queries可以根据不同设备的尺寸设置不同的样式 */
@media screen and (max-width: 768px) {
  .mobile {
    font-size: 14px;
  }
} 

以上是一些CSS3新属性的介绍，它们可以大幅度提升我们在网页设计中的创造力和效率，但部分低版本浏览器不支持，所以在实际使用中要注意兼容性问题。