Box Shadow(阴影)
Text Shadow(文本阴影)
Text Stroke(文本描边)和text-fill-color(文本填充色)
border-radius(圆角)
webkit内核的safari、 Chrome的Linear Gradients (线性渐变)
Firefox的Linear Gradients (线性渐变)
transform(变形)和transform-origin(变形原点)
CSS3 Flexbox 布局演示
Firefox的Linear Gradients (线性渐变) -Css3演示
效果设置区
基本效果
开始颜色:
结束颜色:
水平位移:
%
垂直位移:
%
角度:
%
停靠
颜色:
偏移量:
%
是否加阴影
删除停靠
添加停靠
效果预览区
代码区
说明
Safari 4
Firefox 3.6
Opera
Chrome
Internet Explorer
Firefox的Linear Gradients (线性渐变) 基本语法:background-image:-moz-linear-gradient([<point> | | <angle>,] , 开始颜色值,结束颜色值, [(停靠颜色值,偏移量百分数),...] );
-moz-linear-gradient是background的一个属性值;
第一组参数<角度位置>为非常灵活,他的基本组成点位 <point> ( 渐变的出发点 )和角度;
<point> 渐变的出发点: 它可以被指定为一个百分比,像素,或使用“left”,“center”或“right”的水平和“top”,“center”,或“buttom”的垂直定位。 位置从最受影响的元素左上角。
如果只在水平渐变的话,只要设置:“left center”或“right center”,如果垂直渐变的话设置“center top”或者“center buttom”。Firefox下可以省略掉 “center”,也就是如果只在水平渐变的话,只要设置:“left”或“right”,如果垂直渐变的话设置“top”或者“buttom”。(
查看例子
)
如果这两个值是百分比的值的话,那么第一个是水平渐变位置,第一个是垂直渐变位置,这个时候还需要一个角度值,比如“90deg”;这个可以看本页的例子;
还可以是只有一个角度值。(
查看例子
)
(开始颜色值),(结束颜色值)是两个渐变颜色值;
[(停靠颜色值,偏移量百分数),...]:可以使用多个color-stop,如果渐变只有2个颜色,那么可以不使用该参数;偏移量必须为0%~100%;
webkit内核的safari、 Chrome下的Linear Gradients (线性渐变) 请参阅:
http://www.css88.com/archives/2154
ie下可以使用渐变滤镜,请参阅:
http://msdn.microsoft.com/en-us/library/ms532997(VS.85).aspx
停靠
颜色:
位置:
%