1. 渐变：
liner-gradient(渐变方向（top/left/top left/），颜色，颜色)—并且要适配各钟浏览器
.gradient{
background: -moz-linear-gradient(top,#FFFFFF,#f8f8f8); --火狐
background: -webkit-linear-gradient(top,#FFFFFF,#f8f8f8); --欧朋 苹果
background: -ms-linear-gradient(top,#FFFFFF,#f8f8f8); --IE
background: linear-gradient(top,#FFFFFF,#f8f8f8);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 0, startColorstr = #FFFFFF,
endColorstr = #f8f8f8)";
+background:#f9f9f9; --IE其他不支持的单独设颜色
}
2. 选某一行：#content .product ul li : nth-child(2n) / first-child / last-child{}
3. 盒子阴影：box-shadow: (inset:内阴影时) black 1px 1px 3px;
box-shadow: inset 0 5px white, /*上部内阴影*/
inset 0 -5px#bbb, /*下部内阴影*/
inset 5px0#d7d7d7, /*左部内阴影*/
inset -5px0#d7d7d7;/*右部内阴影*/
语法：box-shadow: h-shadow v-shadow blur spread color inset;（水平，垂直，模糊距离，颜色，内阴）
4. 排他操作： $('.xiaoyuandian li').eq(index).addClass('cur').siblings().removeClass('cur');
5. 优先执行：width: 100% !important;
6. Div垂直居中;
7. 向上取整：Math.ceil(json.tittle.length/8)
8. flex:1; //让所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容：
9. overflow-y:hidden /scroll…; //overflow-y 属性规定是否对内容的上/下边缘进行裁剪 - 如果溢出元素内容区域的话。
10. -webkit-box-orient: vertical //从上向下排列子元素
11. background: url(../img/movicon2.png)no-repeat 50%;background-size: auto 24px; //设置一个背景图片 在位置的正中50%， 背景高24px 宽随高自适应
12. -webkit-margin-before:1em 是元素上边距数值为1倍字体高度
13. outline:#00FF00 dotted thick; 设置 4 个边框的样式：
14. text-decoration: none; 属性规定添加到文本的修饰。(underline:文本下划线； line-through：穿过文本线
15.鼠标悬浮元素上浮阴影效果
.item{transition: transform 0.5s ease-out 0s, -webkit-transform 0.5s ease-out 0s;}
.item:hover{box-shadow: 0 15px 30px rgba(10,10,10,0.4);transform: translateY(-5px);-ms-transform: translateY(-5px);-o-transform: translateY(-5px);-webkit-transform: translateY(-5px);}
16.设置文字间间距：word-spacing: 4px;
17.字体加粗：font-weight: bold;
18.文字首行缩进：text-indent: 4px;
19.input点击出现边框是：input{outline: none;}
20. required： 属性规定必需在提交之前填写输入字段
Name: <input type="text" name="usr_name" required="required" />
21. toLocaleTimeString() 方法可根据本地时间把 Date 对象的时间部分转换为字符串，并返回结果。
$scope.theTime = newDate().tolocaletime;
22. text-transform: 定义文本的大小写状态,此属性对中文无意义
capitalize: 首字母大写
uppercase: 大写
lowercase: 小写
none: 正常无变化
inherit: 继承
23.窗口打开了链接
<!-- 默认超链接 --> <a href="http://sample-link.com" title="Sample Link">Sample</a>
<!-- 当前窗口显示 --> <a href="http://sample-link.com" title="Sample Link" target="_self">Sample</a>
<!-- 新窗口显示 --> <a href="http://sample-link.com" title="Sample Link" target="_blank">Sample</a>
<!-- iframe 中打开链接 --> <a href="http://sample-link.com" title="Sample Link" target="iframe-name">Sample</a> <iframe name="iframe-name" frameborder="0"></iframe>
24. <!-- 页面中的锚点 -->
<span id="test"name="test">测试</span>
<!--比如有很长内容，内容省略-->
<a href="#test">回到测试</a>
25. flex-direction 属性规定灵活项目的方向。
display: flex;flex-direction: column; 灵活的项目将垂直显示，正如一个列一样。
flex-direction: row; 默认值。灵活的项目将水平显示，正如一个行一样。
row-reverse; 与 row 相同，但是以相反的顺序。
column-reverse; 与 column 相同，但是以相反的顺序。
Inherit; 从父元素继承该属性
25.背景图片设置及模糊
.body-bg{background: url(img/bg.jpg)no-repeat;height: 1000px;text-align: center;}
.bg-blur{width: 100%;background-position:center ;background-size:cover ;
-webkit-filter: blur(5px);-ms-filter: blur(5px);filter: blur(5px);}
26.文本是否换行CSS设置不换行：
overflow:hidden 隐藏——css 隐藏
white-space：normal 默认
pre 换行和其他空白字符都将受到保护
nowrap 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象
设置强行换行CSS换行：
word-break:
normal ; 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本
27.opacity渐变
img{filter: alpha(opacity=0);-khtml-opacity: 0;-moz-opacity: 0;opacity: 0;transition: opacity .2s linear;}
div：hover img{display: block;filter: alpha(opacity=100);-khtml-opacity: 1;-moz-opacity: 1;opacity: 1;}
28.font: 400 46px/30px arial;
字体：加粗程度 字体大小/行高 字体；
29.文字超出部分用省略号显示
a.单行
{overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;}
a.多行{
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow:hidden;
}