CSS3中新增属性介绍

CSS3中新增了许多属性，为网页设计提供了更多的灵活性和美观性。主要的新增属性包括：

• 边框：border-radius，可以让边框变得更加圆润；border-image，可以用图片来替代边框；box-shadow，可以让边框产生阴影效果；
• 背景：background-size，可以调整背景图片的大小；background-origin，可以调整背景图片的位置；background-clip，可以调整背景图片的裁剪范围；background-repeat，可以调整背景图片的重复方式；
• 字体：@font-face，可以让网页使用更多的字体；text-shadow，可以让文字产生阴影效果；
• 动画：@keyframes，可以让元素产生动画效果；transition，可以让元素更加平滑地过渡；transform，可以让元素变形；
• 其他：box-sizing，可以让元素的宽度包含边框和内边距；opacity，可以让元素变得透明；

CSS3中新增属性的应用场景

CSS3中新增的属性可以应用在许多场景中，下面介绍一些常见的应用场景。

边框：

border-radius可以让边框变得更加圆润，可以使网页的视觉效果更加美观。box-shadow可以让边框产生阴影效果，可以使网页的视觉效果更加立体。

div {
	border-radius: 10px;
	box-shadow: 0 0 10px #ccc;
}

背景：

background-size可以调整背景图片的大小，可以使背景图片更好的适应容器的大小。background-repeat可以调整背景图片的重复方式，可以使背景图片更加美观。

div {
	background-size: cover;
	background-repeat: no-repeat;
}

字体：

@font-face可以让网页使用更多的字体，可以使网页的视觉效果更加丰富多彩。text-shadow可以让文字产生阴影效果，可以使文字更加突出。

div {
	@font-face {
		font-family: 'MyFont';
		src: url('myfont.ttf');
	}
	text-shadow: 0 0 10px #ccc;
}

动画：

@keyframes可以让元素产生动画效果，可以使网页更加生动有趣。transition可以让元素更加平滑地过渡，可以使网页的视觉效果更加流畅。transform可以让元素变形，可以使网页的视觉效果更加有趣。

div {
	@keyframes myanimation {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}
	transition: all 0.5s;
	transform: rotate(90deg);
}
其他：

box-sizing可以让元素的宽度包含边框和内边距，可以使元素的宽度更加精确。opacity可以让元素变得透明，可以使网页的视觉效果更加美观。

div {
	box-sizing: border-box;
	opacity: 0.5;
}