css3

css3——升级的css2

 

css3的模块

• 选择器   
• 盒模型
• 背景和边框
• 文字特效
• 2D/3D转换
• 动画
• 多列布局
• 用户界面

 

• 选择器    

     

• 盒模型

 

• 背景和边框      

圆角 ——border-radius   

代码：

 border-radius: 10px 20px 30px 40px;
（依次分别为左上，右上，右下，左下）
 分开写：
 border-radius: 10px 20px 30px;
 border-radius: 10px 20px;
 border-radius: 10px;
 下面这个是单属性：
 border-bottom-left-radius: 20px;

 效果：          

                                                    

语法：border-radius: 1-4 length|% / 1-4 length|%;

 

边框阴影-border-shadow

代码：

box-shadow:0 0  20px #000 inset;

效果

：

语法：box-shadow: h-shadow v-shadow blur spread color inset;

 

边界图片——border-image

代码：

 border-image: url("./img/border.png") 30 30 round;

效果：

语法：border-image: source slice width outset repeat|initial|inherit;

 

• 文字特效

描述	CSS
hanging-punctuation	规定标点字符是否位于线框之外。	3
punctuation-trim	规定是否对标点字符进行修剪。	3
text-align-last	设置如何对齐最后一行或紧挨着强制换行符之前的行。	3
text-emphasis	向元素的文本应用重点标记以及重点标记的前景色。	3
text-justify	规定当 text-align 设置为 "justify" 时所使用的对齐方法。	3
text-outline	规定文本的轮廓。	3
text-overflow	规定当文本溢出包含元素时发生的事情。	3
text-shadow	向文本添加阴影。	3
text-wrap	规定文本的换行规则。	3
word-break	规定非中日韩文本的换行规则。	3
word-wrap	允许对长的不可分割的单词进行分割并换行到下一行

例如：

• 2D/3D转换

2D转换

数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

2D正方形：

3D转换

数	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

3D正方体：

• 动画

http://localhost:63342/1108/%E8%87%AA%E5%86%99-loading%E7%89%B9%E6%95%88.html（loading动画特效）

 

@keyframes 规则：

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

 

下面的表格列出了 @keyframes 规则和所有动画属性：

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。	3

• 多列布局

1. column-count ——指定了需要分割的列数
2. column-gap——指定了列与列间的间隙
3. column-rule-style——指定了列与列间的边框样式
4. column-rule-width——指定了两列的边框厚度:
5. column-rule-color——指定了两列的边框颜色
6. column-rule——是 column-rule-* 所有属性的简写
7. column-span——指定元素要跨越多少列，值只有1和all
8. column-width——指定列的宽度
9. columns ——column-width 与 column-count 的简写属性。

注意：colum-width与column-count不能联用

 

• 用户界面

1. resize——指定一个元素是否应该由用户去调整大小
2. box-sizing——允许您以确切的方式定义适应某个区域的具体内容
3. outline-offset——对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓