css3

目录：边框、背景、渐变、文本阴影、字体

 

1、边框

1）圆角：

div
{
border:2px solid;
border-radius:25px;
}

2）阴影

div
{
box-shadow: 10px 10px 5px #888888;
}

3）边界图片

div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

2、背景

默认border-box

3、渐变gradient

1）线性渐变linear-gradient      （默认从上到下）

background: linear-gradient(direction, color-stop1, color-stop2, ...);

从左到右：

对角：

角度：

background: linear-gradient(angle, color-stop1, color-stop2);

使用多个颜色：

#grad3 {
    height: 200px;
    background: -webkit-linear-gradient(red 10%, green 85%, blue 90%); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(red 10%, green 85%, blue 90%); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(red 10%, green 85%, blue 90%); /* Firefox 3.6 - 15 */
    background: linear-gradient(red 10%, green 85%, blue 90%); /* 标准的语法（必须放在最后） */
}

透明度：

重复：

2）径向渐变 radial-gradient

background: radial-gradient(center, shape size, start-color, ..., last-color);

center  从中心点出发，也可以设置具体位置

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

size 参数定义了渐变的大小。它可以是以下四个值：

• closest-side
• farthest-side
• closest-corner
• farthest-corner

重复   repeating-radial-gradient()

4、文本阴影

text-shadow: 5px 5px 5px #FF0000;

（和box-shadow是一样的）

text-overflow：CSS3文本溢出属性指定应向用户如何显示溢出内容

换行：

word-break:keep-all; 不拆单词

word-break:break-all; 拆单词

5、字体

@font-face引入新的字体

font-family：新的字体的名字

6、2D转换transform

1）translate()  移动

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

2）rotate()  旋转

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

3）scale()  缩放

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

宽变成2倍，高变成3倍
transform: scale(1.1);  整体变成1.1倍

4）skew()  倾斜

transform:skew(<angle> [,<angle>]);

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

• skewX(<angle>);表示只在X轴(水平方向)倾斜。
• skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

5）matrix() 把上面的方法混合

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