本文共 5033 字，大约阅读时间需要 16 分钟。

1.5 CSS3新特性

笔者为正在学习web前端开发基础的菜鸟，计划先学习祖传三大件：HTML CSS及JS。写博客主要是为了加深记忆，以及把自己所学分享。本博客的内容主要为学习笔记，由于自学，其中我会借鉴网课老师课堂笔记再加入一些自己的见解，同时会分享一些学习过程中遇到的问题和解决方法。

正文

1.CSS3的主要新特性：

1）选择器2）阴影3）形状转换（2D <-> 3D）4）变形5）动画（过渡动画、帧动画）6）边框7）多重背景8）反射9）文字10）颜色函数（rgba/hsl/hsla）11）滤镜（filter）12）弹性布局13）多列布局14）栅格布局15）盒模型16）Web字体17）媒体查询

2. CSS3兼容

CSS3不是属于浏览器或同一浏览器的不同版本都支持，所以需要兼容处理，通常的做法就是加厂商前缀。1）主流浏览器内核（面试）    a)Trident: IE内核    b)Webkit：Chrome和Safari内核    c)Gecko：FireFox内核    d)Blink（是Webkit的一个分支）： Chrome和Opera内核    Tips（技巧）:        目前国内的浏览器大多都是双核的（IE内核+Chrome内核）2）厂商前缀（很重要）    IE： -ms-    Chrome&Safari： -webkit-    FireFox： -moz-    Opera： -o-

3. CSS3选择器

丰富选择的目的：在标签中减少class和id属性的使用。1）属性选择器    [属性名]    [属性名=属性值]    [属性名^=属性值]：选择以某元素开头的    [属性名$=属性值]：选择以某元素结尾的    [属性名*=属性值]：选择包含某元素的，这个“包含”是可以是类名匹配包含，也可以是文本包含。2）结构性伪类    :first-child    :last-child    :nth-child(n)    :nth-last-child(n)    :nth-of-type(n)    :nth-last-of-type(n)    :only-child    :only-of-type    :empty3）目标伪类    :target 4）UI元素状态伪类    :checked  (只在Opera浏览器中有效)    :disabled    :enabled    :selection5）否定伪类    :not()6）通用兄弟元素选择器

4. CSS3文本

1） 文本阴影（主流浏览器都支持，（IE9以上支持））         text-shadow: 水平偏移距离 垂直偏移距离 [模糊距离] [阴影的尺寸] [颜色] [inset];    2）文本自动换行（主流浏览器都支持）         word-wrap: normal|break-word;    3）单词拆分（主流浏览器都支持）         word-break: normal|break-all|keep-all;    4）文本拆分（所有主流浏览器都不支持）        text-wrap: normal|none|unrestricted|suppress;    5）文本溢出        a)单行文本溢出（重要）            text-overflow: clip|ellipsis|string;            处理文字溢出样式：                width: px/%/em/rem...;                white-space: nowrap; /* 为允许折行 */                -ms-text-overflow: ellipsis; /* 处理IE兼容 */                text-overflow: ellipsis;                overflow: hidden;        b)多行文本溢出（IE9以下的版本不支持，主要是谷歌支持）            width: px/%/em/rem...;            display: -webkit-box;            -webkit-box-orient: vertical;            -webkit-line-clamp: 行数;            overflow: hidden;                    PS：本块内容比较重要的就是单行溢出，其余现学现用即可。

5. CSS3边框

1）圆角边框（重要）     border-radius: 1-4 length|% / 1-4 length|%;     参数数量为一个到四个，一个为所有角，四个参数的顺序为上右下左。2）边框阴影（IE9以上支持，重要）    box-shadow: 水平偏移距离 垂直偏移距离 [模糊距离] [阴影的尺寸] [颜色] [inset];3）边框图片(IE11.0及以后版本支持）    border-image：图片 向内偏移距离 宽度 图像区域超出边框的距离 重复效果;    重复效果：round/strech/repeat

6. CSS3背景

1）多重背景    background: 背景色 背景图片 平铺方式 位置,背景色 背景图片 平铺方式 位置,...    多组方式来写多重背景，各组间参数数量和顺序任意。2）background-size：设定背景图像的尺寸。    background-size: 固定长度|百分比值|cover|contain;3）background-origin：指定背景图像的位置区域。    background-origin: padding-box|border-box|content-box;4）background-clip：设定背景的绘制区域。    background-clip: border-box|padding-box|content-box;5）渐变背景    background-image: 线性渐变｜径向渐变

7. CSS3颜色函数

此块内容笔者觉得理解即可。1）RGBA    rgba(r,g,b,a)    r:红色        取值范围：0-255/0-100%    g:绿色        取值范围：0-255/0-100%    b:蓝色        取值范围：0-255/0-100%    a:不透明度    取值范围：0-1的一个小数2）HSL    hsl(h,s,l)    h:色调        取值范围：0-360    s:饱和度      取值范围：0-100%    l:亮度        取值范围：0-100%3）HSLA    hsla(h,s,l,a)    h:色调        取值范围：0-360    s:饱和度      取值范围：0-100%    l:亮度        取值范围：0-100%    a:不透明度    取值范围：0-1的一个小数

8. opacity

调整元素的不透明度，大多数情况下用于做元素的遮罩效果。取值范围：0-1的一个小数IE8及8以下版本不支持opacity，处理兼容的方式，再添加一行代码来处理不透明度：    filter:alpha(opacity=数值）    数值的范围：0-100

当鼠标悬停在元素上，会有一个漂亮的遮罩效果。

9. CSS3渐变

渐变主要用来设置背景或制作三维图。1）线性渐变    background: linear-gradient(方向或角度, 颜色1 百分比, 颜色2 百分比, ...);    方向：        to left:从右向左渐变        to right:从左向右渐变        to top:从下向上渐变        to bottom:从上向下渐变        to top left:从右下角向左上角渐变        to top right:从左下角向右上角渐变        to bottom left:从右上角向左下角渐变        to bottom right:从左上角向右下角渐变    角度：        比如45度角，应该表示为：45deg    颜色取值：        1）表示颜色的单词        2）16进制颜色        3）表示颜色的函数（rgb()/rgba()/hsl()/hsla()...)2）径向渐变(沿半径方向渐变）    background: radial-gradient(形状 渐变大小 at 位置,颜色1 百分比, ..., 颜色n 百分比);    形状：        ellipse:椭圆径向渐变（默认）        circle:圆径向渐变    渐变大小：        farthest-corner:渐变的半径长度为从圆心到离圆心最远的角（默认）        closest-side:渐变的半径长度为从圆心到离圆心最近的边        closest-corner:渐变的半径长度为从圆心到离圆心最近的角        farthest-side:渐变的半径长度为从圆心到离圆心最远的边    位置：        center:设置圆心在中心位置（默认）        top:设置圆心在顶部位置        bottom:设置圆心在底部位置        at 圆心橫坐标 圆心纵坐标: 设定圆心的位置在指定的（橫坐标，纵坐标）处3）文字渐变    background-image: 线性渐变或径向渐变;    -webkit-background-clip: text;    -webkit-text-fill-color: transparent;

10. box-sizing

允许你以某种方式定义某些元素，以适应指定的区域。box-sizing: content-box/border-box （火狐和谷歌低版本需要厂商前缀）写在容器内元素中，该元素按照指定的宽度来计算。之前文章为了体验一个盒子的真实宽度为padding+border+width，做了一个实验。现在看看这个实验。

小实验

现在，在不改动任何宽度的情况下，给两个子盒子加上box-sizing属性。

.box1{
               border: 1px red solid;            float: left;            width: 200px;            height: 200px;            box-sizing: border-box;            -webkit-box-sizing: border-box;            -moz-box-sizing: border-box;        }

可以看到，结果和前面文章的实验结果相同，都成功排列到了一行上，和减少子盒子宽度或增加父盒子宽度结果相同。

总结

CSS3中的选择器，边框的圆角和阴影，多重背景及背景的各种属性，透明度，box-sizing自适应，在笔者做网页界面的过程中比较常用，可着重学习。当然要考虑其兼容性，厂商前缀要记牢。下篇文章记录下笔者做一个简单网页界面的过程，分享给大家一些小经验，请大家批评指正！

转载地址：http://vqozi.baihongyu.com/