CSS3深度学习

标签：圆心   叠加   rom   属性集   百分比   font-face   repeat   方式   dia   

主流浏览器 + 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深度学习

标签：圆心   叠加   rom   属性集   百分比   font-face   repeat   方式   dia   

原文地址：http://www.cnblogs.com/prettyY/p/7073733.html