CSS3更多属性 浏览器私有前缀

CSS3更多属性 浏览器私有前缀

1边框相关属性

1.1边框圆角border-radius

1.border-top-left-radius:10px20px;  单一选择一个角时，注意是top与bottom在前，right与left在后。第一个数值代表圆角水平方向半径值，第二个数值代表圆角垂直方向半径值。

2.Border-radius:10px15px 20px 30px/30px 15px 20px 10px;  /前代表4个角水平方向值，/后代表4个角垂直方向的值；4个角的顺序为：左上右上 右下 左下，顺时针的顺序。

3.Border-radius:10px/20px;  代表4个角的半径都是10px和20px。

1.2边框图片

Tep1:边框图片资源：border-image-source:url(“”);

Tep2:边框图片切割：border-image-slipe:27;(不需要单位)  

border-image-slice:10 20 30 40;  分别为四条线上右下左，10为上边的线距离top有10个单位。

 

1.border-image-width:;边框背景图宽度，若该宽度比border宽度大，会压到盒子内的内容。

2.border-image-repeat:repeat/stretch/round;  repeat:边框图片是否重复，可能会有多余。  Round：重复并压缩为刚刚好，不会有多余。  Stretch:拉伸，默认属性。

3.border-image-outside:;边框背景图向外延伸，不能取负值。

2渐变 gradient

2.1线性渐变linear-gradient

1.background:-webkit-gradient(linear,00,100% 100%,from(red),to(blue)); 

作为属性值：-webkit-gradient(渐变的形式，起点，终点，开始颜色，结束颜色)；

2.background:-webkit-gradient(linear,00,

100%100%,color-stop(0,red),color-stop(0.5,yellow),color-stop(1,blue));

其中color-stop(0,red)代表，0是红色最深处，0.5是黄色最深处。

3.background:-webkit-linear-gradient(top,red0,blue 50%,purple 100%);

作为属性值：-webkit-linear-gradient(方向，颜色，最深处....)  方向:top bottom  30deg.

2.2径向渐变radial-gradient

background:-webkit-radial-gradient(50% 50%，circle farthest-side,

red 0,blue 50%,green 100%);   

作为属性值:-webkit-radial-gradient(圆心，渐变的形式(包括形状、大小)，颜色颜色最深处位置.....);

渐变的大小，即渐变到哪里停止，有四个值：

1.closest-side/farthest-side   最近边/最远边

2.closest-corner/farthest-corner  最近角/最远角

2.3重复渐变repeating-gradient

background:-webkit-repeating-linear-gradient(30deg,red0%,red 5%,

black 5%,black 10%);

background:-webkit-repeating-gradient(center,circle,closest-side,red0%,

red 5%,black 0%,black 5%);

3浏览器内核私有前缀

3.1为何浏览器会有私有前缀

浏览器名称	内核	私有前缀
Chrome  Safari	webkit	-webkit-
Firefox	gecko	-moz-
Opera	presto	-o-
IE	trient	-ms-
Chrome Opera开发	blink

 

在一个属性成为标准属性之前，如果可以在某个浏览器上使用这个属性，那么都要加上私有前缀，过渡一段时间后，如果多个浏览器都将该属性作为私有前缀属性使用，那么这个属性可能变成标准属性。

3.2渐进增强和优雅降级

渐进增强：先低版本，保证基本功能，再针对高版本进行效果增加。先写过渡属性，后写标准属性。

优雅降级：从复杂开始，构建完整的功能，再针对低版本浏览器进行兼容。先写标准属性，再写过渡期属性。

4过渡transition

过渡transition，慢慢地变化。

4.1transition-property过渡属性

Transition-property:background/color....;

4.2transition-duration

过渡时间

4.3transition-timing-function过渡形式

Transition-timing-function:linear/ease/ease-in/ease-out;  线性渐变  慢进慢出  慢进   慢出

4.4transition-delay

延时过渡时间

4.5总写

Transition:4.1 4.2 4.3 4.2;   一般用transition:all 3s;

注意，transition由webkit浏览器提出，其他内核浏览器使用时需要添加前缀，ie不支持。

5  2D转换transform

5.1 transform:translate移动

1 transform:translate(x,y);  水平移动x，垂直移动y;

2 transform:translateX(x);  水平方向移动x；

3 transform:translateY(x);  水平方向移动y。

5.2 transform:scale缩放

Transform:scale(2,0.5);   transform:scale(x,y);  transform:scaleX(x)

transform:scaleY(y)   注意，缩放中心点默认在元素中央。

5.3 transform:rotate旋转

Transform:rotate(角度值如30deg);   角度为正值时，元素顺时针旋转；角度为负值时，元素逆时针旋转。  旋转中心点默认在元素中央。

5.4 transform:skew扭曲

transform:skew(x,y);  在x,y方向上扭曲角度。详情请看资料。

 

心得

在变换transform数值为百分比时，说明拿到的数值为该元素的百分比，而不是父元素的。

Content/padding/border/margin数值设为百分比时，都是取父级元素的百分比。

 

小图标或字体图标定位心得

li{.......;

Position:relative;

}

li:before{

content:””;

display:block;

........

background:url(“”);

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

}