web前端CSS3学习2017.6.29
css3属性
一 颜色表示法
英文单词
十六进制
rgb(10,25,30)
第一个值表示的是红色占比
第二个值表示的是绿色占比
第三个值表示的是蓝色占比
占比取0-255
透明度
rgba(红色,绿色,蓝色,透明度)---(ie9)
透明度的取值：0---1,如果值越大，透明度越低
opacity:0.5---(ie9)
后面跟一个0---1的值,如果值越大，透明度越低
opacity对整个元素的所有内容都会透明，而rgba只是设置元素的颜色透明
filter:alpha(opacity=50);---滤镜(支持ie8及更早版本),取值为(0---100)%,如果值越大，透明度越低
opacity:0.5;
二 设置圆角边框---(ie9)
-webkit-/-moz-
border-radius:5px/5%;
border-top-left-radius:150px;
border-bottom-right-radius:150px;
缩写：
border-radius: 左上 右上 右下 左下;
border-radius: (左上/右下) (右上/左下);
border-radius: (左上) (右上/左下) (右下);
----前缀----
为什么会产生前缀：在标准为确定时，部分浏览器已经根据最初草案实现了部分功能，为了与之后确定下来的标准进行兼容
加了前缀的作用：可以兼容到浏览器更早的版本
-webkit- chrome
-moz- firfox
-o- opara
-ms- IE
三 设置盒阴影---ie9
-webkit-/-moz-/-o-
box-shadow: 水平偏移量 垂直偏移量 模糊距离 阴影尺寸 颜色 inset/outset;
四 过渡效果---ie10
-webkit-/-moz-/-o-
transition：参与属性 过渡时间 动画类型 延迟时间；
当参与的css属性发生变化时，才能产生过渡效果
动画类型：
默认,ease---以慢速开始，然后变快，最后以慢速结束
linear---从始至终都是相同的速度
五 2D转换---ie9
-webkit-/-moz-/-o-/-ms-
transform:
translate(x,y) 沿着X和Y轴移动,在初始位置的左上角开始偏移
translateX(n)/translateY(n)
scale(width,height) 改变元素的宽度和高度
scale(n) 宽度和高度都是以n的倍数进行放大或缩小
scaleX(n)/scaleY(n),以中心点为坐标进行放大或缩小
rotate(deg) 规定元素旋转多少度,以顺时针的方向旋转
skew(x-deg,y-deg) 沿着x和y轴倾斜
transform-origin:设置中心坐标
center center;(默认值)
left/right top/bottom;
具体值/百分比;
六 transparent====》rgba(0,0,0,0)全透明黑色速记法
background-color---ie5
border-color----ie7
color----ie9
七 设置背景图大小---（ie9）
background-size:
500px;等比例缩放
500px 300px;
cover;将背景图等比例缩放到完全覆盖容器，背景图有可能会超出容器
contain;将背景图像等比例缩放到宽度或高度与容器的宽度或高度相等，背景图始终被包含在容器内
八 设置背景图的定位区域---（ie9）
background-origin:
padding-box;从padding区域(包含padding)开始显示背景图像
border-box;从border区域开始显示背景图像
content-box;从内容区域显示背景图
九 设置文本阴影--（ie10）
text-shadow:水平偏移量 垂直偏移量 模糊距离 阴影颜色;
十 溢出文本处理
text-overflow:
clip;不显示省略标记，而是简单的裁切
ellipsis;当文本超出时以省略号的方式显示，省略号插入的位置是在最后一个字符
ellipsis-word;省略号插入的位置是最后一个词
white-space:
nowrap;表示强制在同一行显示
pre;表示显示语文本格式
让文本显示在一行，超出部分显示省略号
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
十一 动画(@keyframes规则)---ie10
-webkit-
animation:@keyframes名字 花费时间 速度曲线 延迟时间 播放次数 是否轮流反向
速度曲线：
linear，匀速播放
ease，默认。先慢再快后慢的播放
播放次数：
n，代表播放n次
infinite，无限循环
轮流反向：
normal，默认
alternate，轮流方向播放
