-
::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动(当然可以利用他们制作出其他的效果)。
查看全部 -
有的时候设计要求,不使用上图那种浏览器默认的突出文本效果，需要一个与众不同的效果，此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。
查看全部 -
细致研究查看全部
-
-webkit-transform-style: preserve-3d;
查看全部 -
css3前缀：
谷歌： -webkit
firefox： -moz
ie: -ms
eg: @-ms-keyframes run{}
查看全部 -
backwards:告诉动画在第一关键帧上等待动画开始(delay的时间)查看全部
-
借笔记：forwards其实是在动画结束后一直保持最后一帧的属性；backwards是在动画开始之前有个delay时间，在delay时间的时候就把该元素的属性变成动画第一帧的属性，而不是保持原来的属性。比如动画是背景年华，原始是黑色背景，而动画第一帧从红色的开始，延迟2s，那么播放动画时，前面2s delay时间背景就已经变成红色了，而用none的时候就是保持黑色。both就是把forwards和backwards这两个结合起来。
查看全部 -
语法：
@font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; } 这样设置之后，就可以像使用普通字体一样在（font-*）中设置字体样式。比如：p { font-size :12px; font-family : "My Font"; /*必须项，设置@font-face中font-family同样的值. 也就是说：*/}查看全部 -
CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同，这里我们只针对线性渐变的 W3C 标准语法来分析其用法，其余大家可以查阅相关资料。W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。
线性渐变语法：
linear-gradient(渐变方向，颜色起始点，颜色结束点)
颜色的起止点可以有两至多个色值
指定渐变方向：
角度 用英文 作用
0deg to top 从下向上
90deg to right 从左向右
180deg to bottom 从上向下
270deg to left 从右向左
to top left 右下角到左上角
to top right 左下角到右上角
查看全部 -
语法：
color：rgba(R,G,B,A)
以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数，取值在0~1之间，不可为负值。
查看全部 -
border-image:url(borderimg.png) 70 repeat
查看全部 -
一段代码实现投影效果：
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
注意：inset 可以写在参数的第一个或最后一个，其它位置是无效的。
查看全部 -
css3查看全部
-
<table><tbody><tr class="firstRow"><td><p>前缀</p></td><td><p>浏览器</p></td></tr><tr><td><p>-webkit</p></td><td><p>chrome和safari</p></td></tr><tr><td><p>-moz</p></td><td><p>firefox</p></td></tr><tr><td><p>-ms</p></td><td><p>IE</p></td></tr><tr><td><p>-o</p></td><td><p>opera</p></td></tr></tbody></table><p>content-type是一种内容类型，定义网络文件的类型和网页编码，</p><p>http-equiv="Content-Type" 意思是把 content 属性关联到 HTTP 头部；<br />content="text/html; charset=utf-8" 定义文档编码为utf-8；</p><p>transform-style ：如何在 3D 空间中呈现被嵌套的元素。</p><p>text-shadow：字体阴影</p><p>@keyframes run ：创建一个名为run的动画</p><p><br /></p>查看全部
-
animation-name:动画名字，与@keyframs定义的名字一致；
animation-duration:执行时间;
animation-timing-function:执行动画的变换方法，即线性运动，变速运动等。
animation-delay:动画执行延时开始时间；
animation-iteration-count:动画执行次数，infinite无限次数；
查看全部
举报