css3新特性回顾

发表于 | 分类于

选择器

属性选择器

注：前四个为CSS2定义的属性选择器

E[attr] 属性名，不确定具体属性值
E[attr=”value”] 指定属性名，并指定其对应属性值
E[attr ~=”value”] 指定属性名，找到的是具有此属性名，且与其它属性名之间用空格隔开
E[attr |= “value”] 指定属性名，属性值以value-开头或者值为value
E[attr ^= “value”] 指定属性名，属性值以value开头
E[attr $=”value”] 指定属性名，属性值以value结束
E[attr *=”value”] 指定了属性名，属性值中包含了value

结构伪类选择器

E:root 选择文档的根目录，返回html
E:nth-child(n) 父元素下的第n个子元素

  • E:nth-child(odd) 奇数子元素(同nth-child(2n-1))
  • E:nth-child(even) 偶数子元素(同nth-child(2n))

E:nth-last-child(n) 倒数第n个子元素
E:nth-of-type(n) 父元素下的第n个指定类型的子元素,非指定类型元素不参与排序
E:nth-last-of-type 父元素下的倒数第n个指定类型的子元素
E:first-child 选择父元素下的第一个子元素
E:last-child 选择父元素下的最后一个子元素
E:first-of-type 选择父元素下第一个指定类型的子元素
E:last-of-type 选择父元素下最后一个指定类型的子元素
E:only-child 选择父元素下唯一的子元素
E:only-of-type 选择父元素下指定类型的唯一子元素

UI伪类选择器

指定样式只有当元素处于某种状态下时才起作用，在默认状态下不起作用。

E:link 指向未被访问页面的链接设置样式
E:visited 设置指向已访问页面的链接的样式
E:hover 鼠标悬停时触发
E:active 在点击时触发
E:enabled 选择启用状态元素
E:disabled 选择禁用状态元素
E:checked 选择被选中的input元素（单选按钮或复选框）

其他选择器

E~F 通用兄弟元素选择器类型，选择匹配F的所有元素，且匹配元素位于匹配E的元素后面。
E:not(selector) 否定伪类选择器，选择匹配E的所有元素，且过滤掉匹配selector选择符的任意元素。
E:target 目标伪类选择器类型，选择匹配E的所有元素，且匹配元素被相关URL指向。
这里给个栗子吧：

1
2
3
4
5
6
7
8
<!-- css -->
div:target {
  background: red;
}
<!-- html -->
<div id="red">盒子1</div>
<div id="red">盒子2</div>

在浏览器地址栏中输入URL，并附加#red,以锚点方式链接到

，则元素立即显示为红色背景

E::selection 选择被用户选取的元素部分。

需要注意的是，::selection只能定义被选择时的background-color，color及text-shadow(IE11尚不支持定义该属性)。

文本、字体与颜色

设计文本阴影

text-shadow 栗子🌰
CSS3中，text-shadow可向文本应用阴影。能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色。
语法: text-shadow: h-shadow v-shadow blur color;

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

定义文本样式

white-space 用来设置如何处理元素中的空白
强制不换行: p { white-space:nowrap; }

word-wrap 允许长单词或 URL 地址换行到下一行
自动换行: p { word-wrap:break-word; }

word-break 属性规定自动换行的处理方法。
强制英文单词断行: p { word-break:break-all; }

注意：设置强制将英文单词断行，需要将行内元素设置为块级元素。

word-break:break-all和word-wrap:break-word的区别

text-overflow 栗子🌰
text-overflow 规定当文本溢出包含元素时的显示，有两个固定值，分别是clip和ellipsis，也可直接传字符串string：

  • clip ：默认值 。不显示省略标记(…)，而是简单的裁切；
  • ellipsis： 当对象内文本溢出时显示省略标记(…)；
  • string：使用给定的字符串来代表被修剪的文本。

使用text-overflow:ellipsis时要注意一下两点：

  1. overflow: hidden; text-overflow:ellipsis;white-space:nowrap;这三个一定要一起用，如果少了white-space:nowrap，文字会把撑高容器的高度，导致替换字符显示不出来；如果少了overflow: hidden，文字会横向撑到容器的外面；
  2. 一定要给容器定义宽度。

设计颜色样式

使用RGBA颜色值
对于不支持 RGBa 的浏览器，这里可以采用渐进增强的方案解决，Kayo 推荐的是指定一个保留色的解决方案。

1
2
3
4
p {
    background:rgb(52,52,52);
    background: rgba(52,52,52,.5);
 }

当然，对于 IE ，可以使用滤镜达到与支持 RGBa 浏览器中相同的效果(参考):

1
2
filter:
 progid:DXImageTransform.Microsoft.gradient(startColorstr=#34343432, endColorstr=#34343432);

定义 opacity 属性
用于设置元素的不透明度级别，IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。

注：opacity 会把被设置的元素及其子元素同时设置为同一个透明度，这样的透明规则相当不灵活，在实际开发中往往也是会遇到很多麻烦。相对于 opacity ，RGBA 可以在单个元素上设置透明度，而不影响其子元素。、

定义 transparent 颜色值
用来指定全透明色彩。transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。

在CSS1中，transparent被用来作为background-color的一个参数值，用于表示背景透明。
在CSS2中，border-color也开始接受transparent作为参数值。
在CSS3中，transparent被延伸到任何一个有color值的属性上。

背景和边框

设计边框背景

border-image可以使用图片来绘制边框。

设计圆角

border-radius可以创建圆角边框，其中每一个值可以为 数值或百分比的形式。栗子🌰

  • 如果是一个值，那么 top-left、top-right、bottom-right、bottom-left 四个值相等。
  • 如果是两个值，那么 top-left和bottom-right相等，为第一个值，top-right和bottom-left值相等，为第二个值。
  • 如果是三个值，那么第一个值是设置top-left，而第二个值是 top-right 和 bottom-left 并且他们会相等,第三个值是设置 bottom-right。
  • 如果是四个值，那么第一个值是设置 top-left， 而第二个值是 top-right 第三个值 bottom-right 第四个值是设置 bottom-left

除了上述的简写外，还可以和border一样，分别写四个角，如下：

1
2
3
4
border-top-left-radius: //左上角
border-top-right-radius: //右上角
border-bottom-right-radius: //右下角
border-bottom-left-radius: //左下角

关于border-radius可参见：秋月何时了，CSS3 border-radius知多少？

设计阴影

box-shadow可以为元素添加阴影

语法：box-shadow: h-shadow v-shadow blur spread color inset;

  • h-shadow 必需,水平阴影的位置,允许负值。
  • v-shadow 必需,垂直阴影的位置,允许负值。
  • blur 可选,模糊距离。
  • spread 可选,阴影的尺寸。
  • color 可选,阴影的颜色。
  • inset 可选,将外部阴影 (outset) 改为内部阴影。

设计背景

css3 为 background 新增了3个派生的子属性 background-origin、background-clip 和 background-size。

定义背景坐标：
background-origin 属性规定 background-position 属性相对于什么位置来定位。

取值说明:

  • padding-box 背景图像相对于内边距框来定位。
  • border-box 背景图像相对于边框盒来定位。
  • content-box 背景图像相对于内容框来定位。

注释：如果背景图像的 background-attachment 属性为 “fixed”，则该属性没有效果

定义背景裁剪区域
background-clip 属性规定背景的绘制区域。

取值说明:

  • border-box 背景延伸到边框外沿（但是在边框之下）。
  • padding-box 边框下面没有背景，即背景延伸到内边距外沿。
  • content-box 背景裁剪到内容区 (content-box) 外沿。

定义背景图片大小
background-size 属性用来指定背景图像的大小。默认值: auto

取值说明:

  • 可使用 长度值 或 百分比 指定背景图像的大小, 值不能为负值。如果设置一个值, 则该值用于定义图像的宽度, 图像的高度为默认值 auto, 根据宽度进行等比例缩放; 如果设置两个值, 则分别作用于图像的宽和高。
  • auto 默认值, 即图像真实大小。
  • cover 将背景图像等比缩放到完全覆盖容器, 背景图像有可能超出容器。(即当较短的边等于容器的边时, 停止缩放)
  • contain 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等, 背景图像始终被包含在容器内。(即当较长的边等于容器的边时, 停止缩放)

2D变形

transform

旋转动画
rotate(<angle>) 旋转函数 取值度数(deg度数)

倾斜动画
skew(<angle>[,<angle>]) 倾斜函数 取值度数
该函数包含两个参数，分别用来定义X轴Y轴的坐标倾斜角度。
skewX()
skewY()

缩放动画
scale(<number>[,<number>]) 缩放函数 取值 正数、负数和小数
该函数包含两个参数，分别用来定义宽和高的缩放比例，如果第二个参数省略则第二个参数等于第一个参数。

移动动画
translate(<translation-value>[,<translation-value>]) 位移函数
该函数包含两个参数，分别用来定义X轴和Y轴的坐标。
—— translateX()
—— translateY()

自定义变形
transform-origin 旋转的基点
初始值为”50% 50%”，接受两个参数，它们可以是百分比、em、px等具体值，也可以是left、center、right或者top、middle、bottom等描述性关键字
2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。
该属性必须与 transform 属性一同使用。
语法transform-origin: x-axis y-axis z-axis;

Transform 执行顺序问题 — 后写先执行

变形动画
matrix(a,b,c,d,e,f) 矩阵函数
通过矩阵实现缩放

  • x轴缩放 a=x*a c=x*c e=x*e;
  • y轴缩放 b=y*b d=y*d f=y*f;

通过矩阵实现位移

  • x轴位移: e=e+x
  • y轴位移: f=f+y

通过矩阵实现倾斜

  • x轴倾斜: c=Math.tan(xDeg/180*Math.PI)
  • y轴倾斜: b=Math.tan(yDeg/180*Math.PI)

matrix(a,b,c,d,e,f) 矩阵函数
通过矩阵实现旋转

  • a=Math.cos(deg/180*Math.PI);
  • b=Math.sin(deg/180*Math.PI);
  • c=-Math.sin(deg/180*Math.PI);
  • d=Math.cos(deg/180*Math.PI);

变换兼容IE9以下IE版本只能通过矩阵来实现

1
filter:   `progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expand');`

IE下的矩阵没有E和F两个参数 M11==a; M12==c; M21==b; M22==d

设计动画

平滑过渡

transition过渡
语法：transition: property duration timing-function delay;

定义过渡属性
transition-property: all || [attr] || none
属性规定应用过渡效果的 CSS 属性的名称，初始值为 all。（当指定的 CSS 属性改变时，过渡效果将开始）。

提示：过渡效果通常在用户将鼠标指针浮动到元素上时发生。

定义过渡时间
transition-duration: <time>
规定完成过渡效果需要花费的时间（以秒或毫秒计）

注：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

定义过渡效果
transition-timing-function
属性规定过渡效果的速度曲线。该属性允许过渡效果随着时间来改变其速度。

  • ease：（逐渐变慢）默认值
  • linear：（匀速）
  • ease-in：(加速)
  • ease-out：（减速）
  • ease-in-out：（先加速后减速）
  • cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ）

定义过渡延迟时间
transition-delay: <time>
规定过渡效果何时开始，值以秒或毫秒计，设置的时间可以为正整数、负整数和0，非零时必须设置单位，为负数时过渡的动作会从该时间点开始显示，之前的动作被截断，为正数时过渡动作会延迟触发。

过渡完成事件

Webkit内核： obj.addEventListener('webkitTransitionEnd',function(){},false);
firefox: obj.addEventListener('transitionend',function(){},false);

3D动画

animation
语法：animation: name duration timing-function delay iteration-count direction;

关键帧——keyFrames
类似于flash：只需指明两个状态，之间的过程由计算机自动计算
关键帧的时间单位

  • 数字：0%、25%、100%等
  • 字符：from(0%)、to(100%)

注：为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

必要属性
animation-name 动画名称（关键帧名称）
animation-duration 动画持续时间

注：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。栗子🌰

animation-play-state 播放状态（ running 播放 和paused 暂停 ）

可选属性
animation-timing-function 动画运动形式

  • linear 匀速。
  • ease 缓冲。
  • ease-in 由慢到快。
  • ease-out 由快到慢。
  • ease-in-out 由慢到快再到慢。
  • cubic-bezier(number, number, number, number)： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

animation-delay 动画延迟(只是第一次 )
animation-iteration-count 重复次数(infinite为无限次)
animation-direction播放前重置
动画是否重置后再开始播放

  • alternate 动画直接从上一次停止的位置开始执行
  • normal 动画第二次直接跳到0%的状态开始执行

监听css3动画结束事件-webkitAnimationEnd

1
obj.addEventListener('webkitAnimationEnd', function (){}, false);

渐变效果

CSS3新增了渐变效果，包括linear-gradient(线性渐变)和radial-gradient(径向渐变)。具体用法参考教程：再说CSS3渐变——径向渐变

网页布局

设计多列布局

通过CSS3，能够创建多个列来对文本进行布局，IE10 和 Opera 支持 column 属性。Firefox 支持替代的 -moz-column 属性。Safari 和 Chrome 支持替代的 -webkit-column 属性。主要有以下属性：

定义列宽
column-width：定义单列显示的宽度

定义列数
column-count: 定义显示的列数

定义列间距
column-gap: 定义列之间的间距

定义列边框样式
column-rule: 定义列之间的宽度、样式和颜色规则

  • column-rule-width 设置列之间的宽度规则
  • column-rule-style 设置列之间的样式规则
  • column-rule-color 设置列之间的颜色规则

定义跨列显示
column-span：属性规定元素应横跨多少列
语法：column-span: 1|all

  • 1 元素应横跨一列
  • all 元素应横跨所有列

Flexbox模块

关于Flexbox请参考大漠的这篇文章：理解Flexbox：你需要知道的一切
顺便兼顾一下：弹性盒子display:box

Flex容器（Flex Container）：父元素显式设置了display:flex
Flex项目（Flex Items）：Flex容器内的子元素

Flex容器属性

flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content

flex-direction
flex-direction属性控制Flex项目沿着主轴（Main Axis）的排列方向。

它具有四个值：

1
2
3
4
/* ul 是一个flex容器 */
ul {
    flex-direction: row || column || row-reverse || column-reverse;
}

简单点来说，就是flex-direction属性让你决定Flex项目如何排列。它可以是行（水平）、列（垂直）或者行和列的反向。

flex-wrap
flex-wrap属性有三个属性值, 默认为 nowrap(不换行排列)：

1
2
3
ul {
    flex-wrap: wrap || nowrap || wrap-reverse;
}

flex-flow
flex-flow是flex-direction和flex-wrap两个属性的速记属性。

1
2
3
ul {
    flex-flow: row wrap;
}

justify-content
记得text-align属性。其实justify-content属性主要定义了Flex项目在水平方向上的对齐方式。

justify-content属性可以接受下面五个值之一，默认属性值是flex-start：

1
2
3
ul {
    justify-content: flex-start || flex-end || center || space-between || space-around
}
  • flex-start 让所有Flex项目靠水平方向开始边缘（左对齐）
  • flex-end 让所有Flex项目靠水平方向结束边缘（右对齐）
  • center 和你预期的一样，center让所有Flex项目排在水平方向中间（居中对齐）
  • space-between 让除了第一个和最一个Flex项目的两者间间距相同（两端对齐）
  • space-around 让每个Flex项目具有相同的空间

align-items
align-items属性类似于justify-content属性。它主要用来控制Flex项目在垂直方向对齐方式。这也是align-items和justify-content两个属性之间的不同之处。

align-items属性可以接受这些属性值：flex-start || flex-end || center || stretch || baseline。

1
2
3
ul {
    align-items: flex-start || flex-end || center || stretch || baseline
}
  • stretch 默认值，让所有的Flex项目高度和Flex容器高度一样。
  • flex-start 让所有Flex项目靠垂直方向开始边缘（顶部对齐）
  • flex-end 让所有Flex项目靠垂直方向结束边缘（底部对齐）
  • center 让Flex项目在Cross-Axis中间（居中对齐）
  • baseline 让所有Flex项目在Cross-Axis上沿着他们自己的基线对齐

align-content
align-content属性用于多行的Flex容器。它也是用来控制Flex项目在Flex容器里的排列方式，排列效果和align-items值一样，但除了baseline属性值。像align-items属性一样，它的默认值是stretch。

  • stretch 使用stretch会拉伸Flex项目，让他们沿着垂直方向适应Flex容器可用的空间
  • flex-start 之前你看到过flex-start。这次是让多行Flex项目靠垂直方向开始边缘。沿着垂直方向从上到下排列。因此Flex项目在Flex容器中顶部对齐。
  • flex-end 刚好和flex-start相反，让多行Flex项目靠着垂直方向结束位置。让Flex项目沿着垂直方向从下到上排列，即底部对齐。
  • center 让多行Flex项目在Cross-Axis中间

Flex项目属性

order || flex-grow || flex-shrink || flex-basis

order
允许Flex项目在一个Flex容器中重新排序。基本上，你可以改变Flex项目的顺序，从一个位置移动到另一个地方。

这不会影响源代码。这也意味着Flex项目的位置在HTML源代码中不需要改变。order属性的默认值是0。它可以接受一个正值，也可以接受一个负值。

值得注意的是，Flex项目会根据order值重新排序。从底到高。

flex-grow 和 flex-shrink
flex-grow和flex-shrink属性控制Flex项目在容器有多余的空间如何放大（扩展），在没有额外空间又如何缩小。

他们可能接受0或者大于0的任何正数。默认情况下，flex-grow属性值设置为0。表示Flex项目不会增长，填充Flex容器可用空间。

flex-basis
flex-basis属性可以指定Flex项目的初始大小。也就是flex-grow和flex-shrink属性调整它的大小以适应Flex容器之前。

flex-basis默认的值是auto。flex-basis可以取任何用于width属性的任何值。比如 % || em || rem || px等。

注意：如果flex-basis属性的值是0时，也需要使用单位。即flex-basis: 0px不能写成flex-basis:0。

flex速记
flex是flex-grow、flex-shrink和flex-basis三个属性的速记（简写）。

注意它们之间的顺序。flex-grow第一，然后是flex-shrink，最后是flex-basis。缩写成GSB，可以帮助你更好的记忆。

如果你只设置了flex-grow和flex-shrink值，flex-basis可能是默认值0。这就是所谓的绝对flex项目。只有当你设置了flex-basis，你会得到一个相对flex项目。

绝对Flex项目的宽度只基于 flex 属性，而相对Flex项目的宽度基于内容大小。

align-self
align-self 改变一个弹性项目沿着侧轴的位置，而不影响相邻的弹性项目。

该属性的取值可以是这些值之一：auto || flex-start || flex-end || center || baseline || stretch。

1
2
3
li:first-of-type {
    align-self: auto || flex-start || flex-end || center || baseline || stretch
}
  • flex-end将目标项目（Flex项目）对齐到垂直方向的末端
  • center将目标项目（Flex项目）对齐到垂直方向的中间
  • stretch会将目标项目拉伸，以沿着垂直方向填满Flex容器的可用空间（Flex项目高度和Flex容器高度一样）
  • baseline将目标项目沿着基线对齐
  • auto 是将目标Flex项目的值设置为父元素的 align-items值，或者如果该元素没有父元素的话，就设置为 stretch

Auto-margin 对齐
当在Flex项目上使用 margin: auto 时，值为 auto 的方向（左、右或者二者都是）会占据所有剩余空间。需要注意的是当在一个Flex项目上使用自动外边距（margin: auto）时，justify-content 属性就不起作用了。

用户界面

改变盒模型组成方式

box-sizing
box-sizing属性可设置的值有content-box、border-box和inherit。

  • content-box: padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 (Element width = width + border + padding)，此属性表现为标准模式下的盒模型。
  • border-box: padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 (Element width = width)，此属性表现为怪异模式下的盒模型。

调节元素尺寸

resize
resize 属性规定是否可由用户调整元素尺寸。如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll。

1
2
3
4
div{
    resize:both; /* none|both|horizontal|vertical; */
    overflow:auto;
}
  • none 用户无法调整元素的尺寸
  • both 用户可调整元素的高度和宽度
  • horizontal 用户可调整元素的宽度
  • vertical 用户可调整元素的高度

设计轮廓

outline-offset
outline-offset属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。