主流浏览器 + IE10以上支持CSS3。
CSS3解决兼容问题,加前缀:
chrom , safire :-webkit
firfox : -moz
IE : -ms
opera : -o
CSS3简化了前端工作人员的设计过程,加快页面载入速度。
CSS3属性集合:
border-radius,圆角。border-radius:左上角 右上角 右下角 左下角。一个左侧的半圆:高100px 宽50px 左上角50px 右上角0 右下角0 左下角50px;
box-shadow:阴影。box-shaow:X轴偏移量 Y轴偏移量 [模糊半径(不可为负)] [扩展半径(可为负,为负则是缩小半径)] 颜色 阴影位置(默认外侧,insrt内侧);
border-image:为边框设置背景图片;border-image:url() [图片地址] XXpx【图片背景的宽度】 repeat(图片的展示方式)【repeat,round(拉伸),stretch(平铺) 】;
rgba(红,绿,蓝,透明度); 颜色叠加与透明度配合 得到的颜色; background-color:rgba(100,100,100,0.5);颜色值在1~255之间,百分比在百分之0-百分之100之间.
linear-gradient(方向,颜色):线性渐变;渐变的颜色和方向;background-image:linear-gradient(to top left,#f00,#ff0,#0f0);从右下角到左上角的先线性颜色渐变。
radial-gradient(半径,颜色):径向渐变;渐变的方式:circle || ellipse,渐变半径,20px 渐变圆心位置:50px 50px;颜色;background-image:radial-grandient(circle,20px 30px at 100px 100px,#f00,#0f0);或者在圆心渐变:background-image:radial-gradient(circle at center,#f00,#0f0);
text-overflow:ellipsis(省略号) || clip(剪切); overflow:hidden; white-space:nowrap;
@font-face:{ font-family:"字体名称"; src: "字体地址"; };嵌入服务端字体.
text-shadow:X偏移量 Y偏移量 blur( 模糊程度) 颜色; text-shadow:2px 2px 3px #f00;
background-origin:border-box(从边框开始) | padding-box(从内边距开始) | content-box(从内容位置开始);