css3入门笔记

css3笔记

边框

---

1.border-radius

用于创建圆角边框

2.box-shadow

添加阴影

3.border-image

使用图片创建边框

背景

---

1.background-size

能够规定背景图片的尺寸，重复使用背景图片；以像素或百分比规定尺寸。百分比规定，尺寸相对于父元素

2.background-origin

规定背景图片的定位区域，可以放置于content-box,padding-box,或border-box

3.background-cilp

规定背景绘制区域，可选content-box,padding-box,或border-box

文本 字体

---

1.text-shadow

文本阴影效果

2.word-wrap

文字换行

3.@font-face
定义自己的字体

2D转换

---

1.translate（）

从当前位置移动，根据给定的的left和top坐标

transform: translate(50px,100px);

2.rotate（）

元顺时针旋转给定角度

transform: rotate(30deg);

3.scala（）

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

transform: scale(2,4);

4.skew（）

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

transform: skew(30deg,20deg);

5.matrix（）

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

transform:matrix(0.866,0.5,-0.5,0.866,0,0);

3D转换

---

1.rotateX（）

素围绕其 X 轴以给定的度数进行旋转

2.rotateY（）

素围绕其 Y 轴以给定的度数进行旋转

过渡

---

transition

transition: width 2s, height 2s, transform 2s;

必须规定两项内容：

1.规定您希望把效果添加到哪个 CSS 属性上
2.规定效果的时长

动画

---

@keyframes规则

·在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

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

1.规定动画的名称
2.规定动画的时长

div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
}

@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

多列

---

1.column-count

属性规定元素应该被分隔的列数

column-count:3; 

2.column-gap

属性规定列之间的间隔

column-gap:40px;

3.column-rule

属性设置列之间的宽度、样式和颜色规则

column-rule:3px outset #ff0000;

用户界面

---

1.resize

属性规定是否可由用户调整元素尺寸

可选值：vertical高度，horizontal宽度，both，none

2.box-sizing

属性允许您以确切的方式定义适应某个区域的具体内容

可选值：

content-box 在宽度和高度之外绘制元素的内边距和边框。
border-box 宽度和高度内进行绘制

3.outline-offset

属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓

轮廓与边框有两点不同：

1.轮廓不占用空间
2.轮廓可能是非矩形