首页 > 代码库 > CSS3深度学习

CSS3深度学习

主流浏览器 + 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(从内容位置开始);

 

CSS3深度学习