css3

边框

 border-radius 用于创建 圆角

• 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
• 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
• 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
• 一个值： 四个圆角值相同

 box-shadow 用来添加阴影

  border-image 属性，可以使用图像创建一个边框

---

 背景

background-image添加背景图片，不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张

background-size指定背景图像的大小

      

---

 

 2D转换&3D转换

2D

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动 

例如    transform:translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转

例如    transform:rotate值（30deg）元素顺时针旋转30度

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数

例如    transform:scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度

skew() 方法 包含两个参数值，分别表示X轴和Y轴倾斜的角度

例如   transform:skew(30deg,20deg);  在X轴和Y轴上倾斜20度30度。

matrix()方法 把 2D变换方法合并成一个

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能

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

 

3D

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

例如   transform: rotateX(120deg);

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

例如   transform: rotateY(130deg);

---

 

transition 过渡

元素从一种样式逐渐改变为另一种的效果  

 

• 指定要添加效果的CSS属性
• 指定效果的持续时间。

 

---

 

 

css3动画     @keyframes 规则

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

 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果

指定至少这两个CSS3的动画属性绑定向一个选择器：

• 规定动画的名称
• 规定动画的时长

用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%（浏览器更好支持） ，0% 是动画的开始，100% 是动画的完成

 

例子： 把 "myfirst" 动画捆绑到 div 元素，时长：5 秒

 

---

 

文本多列  column-

column-count 属性指定了需要分割的列数

 

例子   column-count: 3;  文本分为3列

column-gap 属性指定了列与列间的间隙

例子   column-gap: 40px;  间隙为40px

column-rule-style 属性指定了列与列间的边框样式

例子   column-rule-style: solid;

column-rule-width 属性指定了两列的边框厚度

例子   column-rule-width: 1px;

column-rule-color 属性指定了两列的边框颜色

例子   column-rule-color: lightblue;

column-rule 属性是 column-rule-* 所有属性的简写

例子   column-rule: 1px solid lightblue;   边框的厚度，样式及颜色

column-width 属性指定了列的宽度

例子   column-width: 100px;

column-span: all;   指定元素跨越所有列

---

 

用户界面

resize属性指定一个元素是否应该由用户去调整大小

例子   由用户调整该div大小

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

例子 

 

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

 

 

轮廓与边框有两点不同：

 

• 轮廓不占用空间
• 轮廓可能是非矩形

---

 

图片（略）

圆角图片   椭圆形图片   缩略图

响应式图片   图片文本   卡片式图片   图片滤镜