css3中新增属性有哪些

CSS3是CSS（层叠样式表）的第三个版本，它引入了许多新的特性和属性，使得网页设计更加灵活和强大，以下是CSS3中新增的一些主要属性：

1、边框：在CSS3中，我们可以使用border-radius属性来创建圆角边框，而不需要使用图像或者额外的HTML元素，我们还可以使用border-image属性来为边框应用图像。

2、背景：CSS3引入了多个新的背景属性，包括background-size、background-origin、background-clip等，使得我们可以更灵活地控制背景图像的大小、位置和裁剪方式。

3、文字效果：CSS3提供了一些新的文本效果属性，如text-shadow、text-stroke、word-wrap等，使得我们可以创建出更加丰富和吸引人的文本效果。

4、渐变：CSS3引入了linear-gradient和radial-gradient两个渐变函数，使得我们可以创建出更加复杂和丰富的渐变效果。

5、转换：CSS3提供了transform属性，可以对元素进行旋转、缩放、平移和倾斜等操作，我们还可以使用transition属性来实现元素的过渡效果。

6、动画：CSS3引入了animation和@keyframes两个关键帧动画技术，使得我们可以创建出更加复杂和流畅的动画效果。

7、选择器：CSS3引入了一些新的选择器，如：nth-child、：not、：first-of-type等，使得我们可以更精确地选择和操作HTML元素。

8、媒体查询：CSS3引入了media query技术，使得我们可以根据设备的特性和特性来应用不同的样式。

9、多列布局：CSS3引入了column属性，使得我们可以创建出多列布局，这对于响应式设计和打印样式非常有用。

10、盒子模型：CSS3引入了box-sizing属性，使得我们可以更精确地控制元素的尺寸。

以上就是CSS3中新增的一些主要属性，它们极大地扩展了我们的设计能力，使得我们可以创建出更加丰富和吸引人的网页效果。

接下来，我们来看一下与本文相关的四个问题及其解答：

问题1：如何使用border-radius属性创建圆角边框？

答：要使用border-radius属性创建圆角边框，只需要将该属性应用于需要添加圆角的元素即可，以下代码将创建一个具有圆角边框的div元素：

div {
    border: 1px solid black;
    border-radius: 10px;
}

在这个例子中，border-radius属性的值是一个长度值，表示圆角的半径，如果需要创建不同大小的圆角，可以为每个角分别设置一个值，以下代码将创建一个左上角和右下角为10px半径的圆角边框：

div {
    border: 1px solid black;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

问题2：如何使用background-size属性控制背景图像的大小？

答：要使用background-size属性控制背景图像的大小，只需要将该属性应用于需要添加背景图像的元素即可，以下代码将创建一个背景图像大小为200px x 200px的div元素：

div {
    background: url('image.jpg') no-repeat;
    background-size: 200px 200px;
}

在这个例子中，background-size属性的值是一个长度值列表，表示背景图像的宽度和高度，如果只提供一个值，那么这个值将被用于宽度和高度，如果提供两个值，那么第一个值将被用于宽度，第二个值将被用于高度，如果提供三个值，那么第一个值将被用于宽度，第二个值将被用于高度，第三个值将被用于背景图像的位置。

问题3：如何使用transform属性旋转元素？

答：要使用transform属性旋转元素，只需要将rotate函数应用于需要旋转的元素即可，以下代码将创建一个旋转45度的div元素：

div {
    transform: rotate(45deg);
}

在这个例子中，rotate函数的值是一个角度值，表示旋转的角度，如果需要旋转不同的角度，只需改变这个值即可，还可以使用rotateX函数和rotateY函数分别沿着x轴和y轴旋转元素，以下代码将创建一个沿y轴旋转45度的div元素：

div {
    transform: rotateY(45deg);
}

问题4：如何使用animation和@keyframes创建动画？

答：要使用animation和@keyframes创建动画，首先需要定义一个关键帧动画，然后将该动画应用于需要添加动画的元素，以下代码将创建一个颜色变化的动画：

@keyframes colorchange {
    0% {color: red;}
    50% {color: blue;}
    100% {color: green;}
}
div {
    animation: colorchange 2s infinite;
}

在这个例子中，@keyframes规则定义了一个名为colorchange的关键帧动画，该动画从红色变为蓝色再变为绿色，animation规则将这个动画应用于div元素，使其在2秒内无限次播放这个动画。