css3属性
新特性
渐进增强和优雅降级
- 渐进增强
- 先考虑低版本兼容，再慢慢考虑高版本（更推荐）
- 优雅降级
- 先考虑高版本，再考虑低版本
浏览器私有属性前缀
新增属性
文本效果
1. text-shadow 文本阴影
.text1{text-shadow:5px 5px 5px pink;
}
- h-shadow 水平方位移动的阴影（正值向右，负值向左）
- v-shadow 垂直方位移动的阴影（正值向下，负值向上）
- blur 模糊的距离，只能是正值（可选参数）
- color 阴影的颜色 （可选参数）
2. box-shadow 盒子阴影
多个阴影用逗号隔开
阴影是不占据位置的
div
{box-shadow: 1px 1px 11px 4px #888888 inset;
}
单边盒子阴影
/* 上部 */
.top{box-shadow:0 -2px 0 red;
}
/* 右边 */
.right{box-shadow:2px 0 0 green;
}
/* 底部 */
.bottom{box-shadow:0 2px 0 blue;
}
/* 左边 */
.left{box-shadow:-2px 0 0 tomato;
}
| h-shadow | 必需的。水平阴影，阴影离开盒子的横向距离。允许负值 |
|---|---|
| v-shadow | 必需的。垂直阴影，阴影离开盒子的纵向距离。允许负值 |
| blur | 可选。模糊半径 |
| spread | 可选。阴影的延伸半径，大小 |
| color | 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 |
| inset | 可选。从外层的阴影（开始时）改变阴影内侧阴影 |
3.word-break 强制换行
p.test {word-break:break-all;
}
| normal | 使用浏览器默认的换行规则。 |
|---|---|
| break-all | 允许在单词内换行。 |
| keep-all | 保留单词完整性，只能在半角空格或连字符处换行。 |
4. word-wrap 单词换行
.box{/* 网址换行 */word-wrap:break-word;
}
字体
@font-face
背景
1. background-clip 背景裁切
-webkit-background-clip:text;
color:transparent;
/* 或者 */
-webkit-text-fill-color:transparent;
2. background-origin背景原点
3. background-size 背景中图像的尺寸
- length percentage cover会在一定程度上裁剪的
- contain 不裁剪 ，保持原图宽高比例
圆角
border-radius
如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。
但是，如果你要在四个角上一一指定，可以使用以下规则：
- 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
- 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
- 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
- 一个值： 四个圆角值相同(50%)，即正圆
边框图片
1. background-image
颜色特性
hsl(色调，饱和度%，亮度%)
hsla(色调，饱和度%，亮度%，透明度)
亮度和饱和度需要加%
渐变
渐变是背景图
线性渐变
.div:nth-child(1){background-image:linear-gradient(yellow,green,blue)
}
-
从下往上渐变 to top
background-image:linear-gradient(to top,yellow,green,blue) -
从左往右right
background-image:linear-gradient(to right,yellow,green,blue) -
右上对角渐变to right top
background-image:linear-gradient(to right top,yellow,green,blue) -
颜色多给一点
background-image:linear-gradient(to right top,yellow 80%,green,blue)
径向渐变
默认是椭圆
background-image:radial-gradient(circle,yellow 80%,green,blue)
背景图
background:url(img/1.png) no-repeat left top,url(img/2.png) no-repeat right top,url(img/3.png) no-repeat left bottom,url(img/4.png) no-repeat right bottom
