CSS3基础语法

1：CSS3 边框

border-image 边框图片。

border-radius 圆角边框。

box-shadow 边框阴影。

2：CSS3 背景

background-clip 规定背景的绘制区域。

background-origin 规定背景图片的定位区域

背景图片可以放置于 content-box、padding-box 或 border-box 区域。

background-size 规定背景图片的尺寸。

3：CSS3 文本效果

text-shadow 文本阴影。

word-wrap 允许对长的不可分割的单词进行分割并换到下一行。

4：CSS3 字体

您“自己的”的字体是在 CSS3 @font-face 规则中定义的。

在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)。

5：CSS3 2D 转换

translate() 元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。

rotate() 元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

scale() 元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数。

skew() 元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。

matrix() 方法把所有 2D 转换方法组合在一起，方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

6：CSS3 3D 转换

rotateX() 元素围绕其 X 轴以给定的度数进行旋转。

rotateY() 元素围绕其 Y 轴以给定的度数进行旋转。

7：CSS3 过渡

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

8： CSS3 动画

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

规定动画的名称

规定动画的时长

9：CSS3 多列 您能够创建多个列来对文本进行布局 - 就像报纸那样！

column-count 规定元素应该被分割的列数。

column-gap 规定列之间的间隔。

column-rule 设置列之间的宽度，样式，颜色规则。

10：CSS3 用户界面 新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。

resize 规定是否可由用户调整元素尺寸。

box-sizing 允许您以确切的方式定义适应某个区域的具体内容。

outline-offset 对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

————————————————

版权声明：本文为优快云博主「奘倥城」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.youkuaiyun.com/weixin_45178761/article/details/103967472