CSS3--基础知识点总结

一、 CSS3 边框

• 圆角：border-radius
  当盒子为正方形，radius半径为盒子高度的一半时，将会形成一个圆。
  如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。
  但是，如果你要在四个角上一一指定，可以使用以下规则：
  1.四个值: 依次为左上，右上 ，右下 ，左下
  2.三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
  3.两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
  4.一个值: 四个圆角值相同
• 盒阴影：box-shadow
• 边界图片：border-shadow

二、CSS3 背景

• background-image属性：不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。不同的图片可以设置多个不同的属性。

• background-size属性：指定背景图像的大小，可以指定像素或百分比大小。指定的大小是相对于父元素的宽度和高度的百分比的大小。

• background-origin属性：规定图片的定位区域。
  

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

三、CSS3渐变

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
• 径向渐变（Radial Gradients）- 由它们的中心定义

1.线性渐变

repeating-linear-gradient（）为重复线性渐变

注意：（）内的各种颜色用逗号隔开！

2.使用角度

3.使用透明度

使用 rgba() 函数来定义颜色节点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

4.径向渐变

repeating-radial-gradient() 为重复径向渐变

5.设置形状

shape 参数定义了形状。它可以是值 circle 或 ellipse。（circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。）

6.不同尺寸大小关键字的使用

使用方式：

• closest-side at 60% 50%，颜色
• farthest-side at 60% 50%，颜色
• closest-corner at 60% 50%，颜色
• farthest-corner at 60% 50%，颜色

四、文本效果

1.阴影

• text-shadow：适用于文本阴影，例：text-shadow: 5px 5px 5px #FF0000;分别为水平阴影，垂直阴影，模糊的距离，阴影的颜色。
• box-shadow：适用于盒子阴影或者用来创建纸质样式卡片
• text-overflow：为文本溢出属性，指定应向用户如何显示溢出内容
• word-wrap：自动换行，例：p {word-wrap:break-word;}
• word-break：单词拆分换行。

五、CSS3 2D和3D转换

1、2D转换

• translate()方法：根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
• rotate()方法：括号内可以写7deg等，在一个给定度数顺时针旋转的元素，负值是元素逆时针旋转。
• scale()方法：该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。例：scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。
• skew()方法：transform:skew(<angle> [,<angle>]);分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
• matrix()方法:matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

2、3D转换

rotateX()方法：围绕其在一个给定度数X轴旋转的元素。
rotateY()方法：围绕其在一个给定度数Y轴旋转的元素。

3D转换方法 ：

函数及描述如下：

六、CSS3过渡

• transition:简写属性，用于在一个属性中设置四个过渡属性。
• transition-property:规定应用过渡的 CSS 属性的名称。
• transition-duration:定义过渡效果花费的时间。默认是 0。
• transition-timing-function:规定过渡效果的时间曲线。默认是 “ease”。
• transition-delay:规定过渡效果何时开始。默认是 0。