20160815 css3
border-radius 可以选两个值 3个值 4个值 分别表是左上右下/右上左下 左上/右上左下/右下 4个值为左上 顺时针
border-image使用必须知道边框图片的像素 不然不好用
background-size 宽高 cover contain
background-origin 表示背景的边界 padding-box内容中添加背景 border-box包含边框的添加背景 content-box在文本中添加背景
rgba hsla（色调 饱和度 明度 透明度alpha）
Gradients
background: -webkit-linear-gradient(red, yellow);
text-shadow: 10px 10px #c6c6c6;
text-shadow: 10px 10px 5px #c6c6c6;第三个参数可以调节模糊度 越大越模糊 1px与原文本相同
box-shadow: 10px 10px 200px grey;
例如卡片特效
.card {
width: 250px;
height:250px;
border:1px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
margin:50px;
}
overflow: hidden ;配合 text-overflow:ellipsis; 达到超出元素边界变为。。。的形式呈现 但貌似不支持中文字符？
如果在该元素的hover事件中加以下属性 会令其在鼠标经过显示隐藏的内容
word-break: keep-all;适合横向排列word-wrap: break-word;适合纵向排列 选一个
CSS3 2D Transform
★jq的animate函数不支持transform属性
transform:translate(x,y) 可以’转换’元素的位置 相当于定位 基点亦在左上
scale() 或 sacle（x，y）可以缩放元素大小 基点为元素中心点 使用height width属性基点在左上
scale() 中的值如果是负值 会先翻转内容 再缩放
rotate(阿尔法);旋转 基点默认为左上
transform-origin:left top;也可以设置transform旋转基点
skew() skewX() skewY() 绕X/Y轴旋转 基线为上边界 和 左边界
transition: width 2s;过度效果
resize 属性规定是否可由用户调整元素尺寸 none|both|horizontal|vertical;
nav-index 导航索引号