其他分享
首页 > 其他分享> > CSS3学习总结----W3school

CSS3学习总结----W3school

作者:互联网

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 对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。

奘倥城 发布了10 篇原创文章 · 获赞 0 · 访问量 194 私信 关注

标签:CSS3,总结,动画,W3school,元素,box,边框,给定
来源: https://blog.csdn.net/weixin_45178761/article/details/103967472