CSS3新特性（新增盒子模型、新增背景属性、新增边框、新增文本)

新增盒子模型

box-sizing

box-sizing: content-box;默认值

box-sizing: border-box; 盒子的计算方式被修改，包含了边框与re

盒子尺寸：resize

值：

• none： 不允许用户调整元素大小。 (默认)

• both： 用户可以调节元素的宽度和高度。

• horizontal： 用户可以调节元素的宽度 。

• vertical： 用户可以调节元素的高度。

盒子阴影：box-shadow: h-shadow v-shadow blur spread color inset;

                （1）默认的影子的颜色是黑色

                （2）前两个参数分别 水平和垂直方向的像素

                （3）值可以为负数

值	描述
h-shadow	必须填写，水平阴影的位置，可以为负值
v-shadow	必须填写，垂直阴影的位置，可以为负值
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色
inset	可选，将外部阴影改为内部阴影

盒子不透明度：opacity

opacity 检索或设置对象的不透明度。 值是0~1的范围。

对于尚不支持opacity属性的IE浏览器可以使用IE私有的滤镜属性来实现与opacity相同的效果（filter: alpha(opacity=透明值)）

新增背景属性

background-origin:

• padding-box：(默认值) 从padding区域（含padding）开始显示背景图像。

• border-box： 从border区域（含border）开始显示背景图像。

• content-box： 从content区域开始显示背景图像。

background-clip:

• border-box： (默认值)从border区域（不含border）开始向外裁剪背景。

• padding-box： 从padding区域（不含padding）开始向外裁剪背景。

• content-box： 从content区域开始向外裁剪背景。

text： 从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果  

             /* 设置文字颜色为透明色 */
            color: transparent;
            /* 设置文字以外的背景图不可见 */
            -webkit-background-clip: text;

background-size :背景图像的尺寸

background-size: 300px 200px;  用长度值指定背景图像大小。不允许负值。

background-size: 100% 100%;   用百分比指定背景图像大小。不允许负值。 相对于的盒子的大小

auto： 背景图像的真实大小。

cover： 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。

contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

/* 添加多个背景图 */
background: url(../images/bg-tl.png) no-repeat, 
            url(../images/bg-tr.png) no-repeat right top,
            url(../images/bg-bl.png) no-repeat left bottom,
            url(../images/bg-br.png) no-repeat right bottom;

复合写法：

background:bg-color bg-image  bg-repeat bg-attachment bg-position / bg-size bg-origin bg-clip

background: url(../images/shanghai.jpg) 50px 50px/cover content-box padding-box;

背景图片属性：background-attachment：fixed；

新增边框

边框圆角：border-radius:length;

• 参数值可以为数值（单位是px）或百分比的形式

• 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%

• 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角

• 分开写：

  • border-top-left-radius：设置左上角的圆角半径；一个值正圆半径，两个值分别是椭圆的x半径和y半径。

  • border-top-right-radius：设置右上角的圆角半径 一个值正圆半径，两个值分别是椭圆的x半径和y半径。

  • border-bottom-right-radius设置右下角的圆角半径一个值正圆半径 两个值分别是椭圆的x半径和y半径。

  • border-bottom-left-radius设置左下角的圆角半径一个值正圆半径，两个值分别是椭圆的x半径和y半径。

• 兼容性 ie9+ 浏览器支持, 但是不会影响页面布局,可以放心使用

扩展：生成圆角的原理：生成了指定水平半径和垂直半径的圆形或椭圆形。（几乎不使用）

在定义一个角的角度的时候实际上定义的是水平和垂直的半径。

border-radius:50px 50px 50px 50px / 25px 25px 25px 25px;

border-raidus:左上水平x 右上角水平x 右下角水平x 左下角水平x / 左上垂直y 右上垂直y 右下垂直y 左下垂直y

边框外轮廓

• outline-width 外轮廓的宽度。

• outline-color 外轮廓的颜色。

• outline-style 外轮廓的风格。

  • none： 无轮廓。与任何指定的 <' outline-width '> 值无关

  • dotted： 点状轮廓。

  • dashed： 虚线轮廓。

  • solid： 实线轮廓

  • double： 双线轮廓。两条单线与其间隔的和等于指定的 <' outline-width '> 值

  • groove： 3D凹槽轮廓。

  • ridge： 3D凸槽轮廓。

  • inset： 3D凹边轮廓。

  • outset： 3D凸边轮廓。

• outline-offset 设置外轮廓与边框的距离，正负值都可以设置； 不是 outline 的子属性，是一个独立的属性。

• outline 复合属性，同时设置宽度、颜色和风格。

新增文本

文本对齐：

text-align 文本水平对齐方式。

• left： 内容左对齐。

• center： 内容居中对齐。

• right： 内容右对齐。

• justify： 内容两端对齐。

• start： 内容对齐开始边界。（CSS3） （CSS3中规定的默认值）

• end： 内容对齐结束边界。（CSS3）

文本阴影：

text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色

文本换行

• word-wrap / overflow-wrap 设置内容超过指定容器的边界时是否断行。

  • normal： 允许内容顶开或溢出指定的容器边界。 （默认值）

  • break-word： 内容将在边界内换行，如果需要，单词内部允许断行。它要求一个没有断行破发点的词必须保持为一个整体单位，如果当前行无法放下需要被打断的单词，为了保持完整性，会将整个单词放到下一行进行展示。这与word-break的break-word值效果相同

  注意：

  IE5.5率先实现了word-wrap，后期被w3c采纳成标准属性；

  CSS3中将word-wrap改名为overflow-wrap；

• word-break 文本的字内换行行为。

  • normal： 默认的换行规则。依据各自语言的规则，允许在字间发生换行。 （默认值）

  • keep-all： 对于 CJK（中文，韩文，日文）文本不允许在字符内发生换行。Non-CJK 文本表现同normal

  • break-all： 对于 Non-CJK 文本允许在任意字符内发生换行。该值适合包含一些非亚洲文本的亚洲文本，比如使连续的英文字符断行。

  • break-word： 与break-all 相同，不同的地方在于它要求一个没有断行破发点的词必须保持为一个整体单位。这与 word-wrap 的 break-word 值效果相同

white-space 设置元素是否保留文本间的空格、换行；指定文本超过边界时是否换行。

• normal： 默认处理方式。会将序列的空格合并为一个，内部是否换行由换行规则决定。 （默认值）

• pre： 原封不动的保留你输入时的状态，空格、换行都会保留，并且当文字超出边界时不换行。等同 pre 元素效果

• nowrap： 与normal值一致，不同的是会强制所有文本在同一行内显示。

• pre-wrap： 与pre值一致，不同的是文字超出边界时将自动换行。

• pre-line： 与normal值一致，但是会保留文本输入时的换行。

文本溢出： 

text-overflow 设置文本内容溢出容器时的状态

• clip： 当内联内容溢出块容器时，将溢出部分裁切掉。 （默认值）

• ellipsis： 当内联内容溢出块容器时，将溢出部分替换为（...）。

注意：要使得 text-overflow 属性生效，块容器必须显式定义 overflow 为非 visible 值， white-space 为 nowrap 值。

文本装饰： 

• text-decoration CSS3变成了复合属性

  text-decoration：text-decoration-line || text-decoration-style || text-decoration-color

  注意：

  所有浏览器均支持 CSS2.1 中的text-decoration属性，在CSS3中，该属性定义被移植到其新的分解属性 text-decoration-line 上；

• text-decoration-line 设置文本装饰线的位置

  • none： 指定文字无装饰 （默认值）

  • underline： 指定文字的装饰是下划线

  • overline： 指定文字的装饰是上划线

  • line-through： 指定文字的装饰是贯穿线

  • blink： 指定文字的装饰是闪烁。

• text-decoration-style 文本装饰线条的形状

  • solid： 实线 （默认）

  • double： 双线

  • dotted： 点状线条

  • dashed： 虚线

  • wavy： 波浪线

• text-decoration-color 文本装饰线条的颜色

文本描边

文字描边功能仅 webkit 内核浏览器支持

• -webkit-text-fill-color 定义文字填充色

  注意：

  若同时设置 -webkit-text-fill-color 和 color 属性，-webkit-text-fill-color 定义的颜色将覆盖 color 定义。

• -webkit-text-stroke-width 设置文字描边的宽度，取长度单位。

• -webkit-text-stroke-color 设置文字描边的颜色，取颜色单位。

• -webkit-text-stroke 复合属性，设置文字描边宽度和颜色。