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