|
1.webkit引擎 -webkit-
2.火狐浏览器 -moz-
3.opera -o-
4.ie -ms-
1.E[attr|=val] 选择attr属性值等于'val'或者以'val-'开头的字符串属性的元素
2.E[attr1][attr2]选择同时包含属性attr1和attr2的属性
3.E[attr~=val]选择具有attr属性并且attr属性中包含val属性的元素，用于元素中某个属性具有一个或者多个属性值的选择
4.E[attr*=val] 选择attr属性中包含字符串val的元素
5.E[attr^=val] 选择attr属性中存在的以'val'开头的所有的元素
6.E[attr$=val] 选择attr属性中存在的以'val'结尾的所有的元素
1.设置一个值，四个圆角的幅度一样大
2.设置两个值，左上右下相同，右上和左下相同
3.设置三个值，第一个值为左上，第二个值为右上和左下，第三个值为右下
4.设置四个值，分别为左上 右上 右下 左下
如果水平半径和垂直半径不同，使用/来分隔
border-radius:60px 40px 30px 20px / 30px 20px 10px 5px
但是如果分开时，可以使用border-top-left-radius:10px 50px 不能使用/分开
background-origin
该属性在设置background-attachment:scroll属性的时候有效果，具有三个属性值
padding-box background-position从padding的外边缘开始
border-box background-position从border的外边缘开始
content-box background-position从padding的内边缘开始
background-size
auto 保持图片原来的样子 相当于没有加backgroud-size
数值backgound-size:xlen,ylen 强行将改变图片的长宽，如果只设置一个数字，第二个值根据图片的比例自动缩放
百分比 当取两个值时，直接通过得到长宽的数值，如果只设置一个数字，第二个值根据图片的比例自动缩放
cover 整个图片放大填充父容器（一般是div）,使用backgroud-position:center将图片移到中间
contain 使背景图片保存本身的宽高比例，缩放到宽度或者高度正好适应所定义背景的区域。（往往背景区域比背景图片小）
扭曲：transform:skew(45deg); 拉扯图形，两个参数，前者为X，后者为Y，一个参数默认为X，Y=0,正数表示向左向上，负数向右向下
缩放：transform:scale(x,y); 缩放是相对于原点的操作，若只有一个参数，x,y的缩放相同为该参数。
移动：transform: translate(x,y);不改变元素的本身性质，只是单纯的移动元素在X与Y的位置
改变中心位置：transform-origin:left top或者使用两个百分比来表示
过渡属性：transition 该属性包含四个属性设置，transition: background-color .5s ease .1s;,分别为
transition-property:指定过渡或动态模拟的CSS属性
transition-duration:指定完成过渡所需的时间
transition-timing-function:指定过渡函数
transition-delay:指定开始出现的延迟时间
通过分别的属性设置为：transition-property:background-color; transition-duration: .5s; transition-timing-function:ease; transition-delay:.1s;
过渡效果：
1.关键字：Keyframes（关键帧） 示例：
2.调用动画：animation-name:changecolor
3.设置动画播放时间：animation-duration:5s
4.设置动画播放的方式：animation-timing-function:ease-in,可以选择的方式有 ease快到慢，ease-in速度愈来愈快（渐显），ease-out速度愈来愈慢（渐隐），linear匀速，ease-in-out先加速再减速
5.设置动画播放之前的等待时间：animation-delay:4s
6.设置动画播放的次数：animation-iteration-count:infinite 默认值为1，设置infinite代表循环
7.设置动画播放的方向：animation-direction:normal 默认值是normal,动画都是向前播放，alternative设置动画在第偶数次向前播放，第奇数次反向播放
8.控制动画的播放状态：animation-play-state:paused|running就是设置动画是停还是开始播放，开始位置是当前位置
9.动画播放完了之后，状态的设置：animation-fill-mode: forwards|backwards|none,forwards和none都是播放完了之后回到原始位置，backwards播放完之后，停在当前的位置 （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
