学习链接

面试官：CSS3新增了哪些新特性？

个人总结（css3新特性）

CSS3新特性

CSS3 新特性

一、是什么

CSS 即层叠样式表（Cascading Style Sheets），是一种标记语言，由浏览器解释执行用来使页面变得更美观。

二、选择器

CSS3 中新增了一些选择器，下面是其中的一部分。

选择器 含义
E ~ F 匹配任何在E元素之后的同级F元素
E[att^=”val”] 属性att的值以”val”开头的元素
E[att$=”val”] 属性att的值以”val”结尾的元素
E[att*=”val”] 属性att的值包含”val”字符串的元素
E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child 匹配父元素下仅有的一个子元素，
等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素，
等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)

三、新样式

边框

CSS3 新增了三个边框属性，分别是：

  • border-radius：创建圆角边框
  • box-shadow：为元素添加阴影
  • border-image：使用图片来绘制边框

box-shadow

设置元素阴影，设置属性如下：

  • 水平阴影
  • 垂直阴影
  • 模糊距离(虚实)
  • 阴影尺寸(影子大小)
  • 阴影颜色
  • 内/外阴影

其中水平阴影和垂直阴影是必须设置的

背景

background-clip

用于确定背景画区。

  • border-box：背景从 border 开始显示（默认）
  • padding-box：背景从 padding 开始显示
  • content-box：背景从 content 区域开始显示
  • text：背景被绘制在前景文本中

background-origin

设置背景图片的左上角对齐点，即 background-position 开始计算的地方。

  • border-box：从 border 开始计算 background-position
  • padding-box：从 padding 开始计算 background-position（默认）
  • content-box：从 content 开始计算 background-position

默认情况是 padding-box，即以 padding 的左上角为原点

background-size

background-size 属性常用来调整背景图片的大小，主要用于设定图片本身。有以下可能的属性：

  • contain：缩小图片以适合元素（维持像素长宽比）
  • cover：扩展元素以填补元素（维持像素长宽比）
  • 100px 100px：缩小图片至指定的大小
  • 50% 100%：缩小图片至指定的大小，百分比是相对包含元素的尺寸
  • auto auto：原始大小（默认）

background-position

background-attachment

background-color

background-repeat

background-position

文字

word-break

  • normal：使用浏览器默认的换行
  • break-all：允许在单词内换行

text-overflow

text-overflow 设置或检索当当前行超过指定容器的边界时如何显示

  • clip：修剪文本
  • ellipsis：显示省略符号来代表被修剪的文本

text-shadow

text-shadow 可向文本应用阴影。

  1. /* offset-x | offset-y | blur-radius | color */
  2. text-shadow: 1px 1px 2px black;

能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色。

text-decoration

  • text-decoration-line：设置文本装饰类型，上中下划线
  • text-decoration-color：设置文本划线的颜色
  • text-decoration-thickness：设置文本划线的厚度
  • text-decoration-style：设置文本划线的样式

颜色

颜色表示方式 rgba(rgb) 与 hsla(hsl)

  • rgba() 分为两部分，rgb 为颜色值，a 为透明度
  • hsla() 分为四部分，h 为色相，s 为饱和度，l 为亮度，a 为透明度

四、transition 过渡

这里

属性 含义
transition-property 指定使用过渡效果的 CSS 属性，默认值为 all
transition-duration 设置过渡动画持续时间，默认值为 0s，不设置则无过渡效果
transition-timing-function 设置动画的时间函数，默认为 ease
transition-delay 设置动画的延迟触发时间，默认值为 0s

五、transform 转换

这里

transform 属性允许旋转，缩放，倾斜或平移给定元素

transform-origin：转换元素的转换原点（围绕那个点进行转换），默认的转换原点是 center

  • 位移 translate
  • 缩放 scale
  • 旋转 rotate
  • 倾斜 skew

六、animation 动画

这里

  1. @keyframes animateName{
  2.     0%   { width:50px; height:50px; } /* from { width:50px; height:50px; } */
  3.     50%  { width:100px; height:100px; }
  4.     100% { width:50px; height:50px; }  /* to { width:50px; height:50px; } */
  5. }
属性 含义
animation-name 指定使用的动画名称
animation-duration 设置动画持续时间，默认值为 0s，不设置则无动画效果
animation-timing-function 设置动画的时间函数，默认为 ease，取值参考 transition
animation-delay 设置动画的延迟触发时间，默认值为 0s
animation-iteration-count 设置动画的执行次数，默认为 1 (infinite 无限次)
animation-direction 设置动画的执行方向，默认为 normal
animation-fill-mode 设置动画的填充模式，默认为 none
animation-play-state 设置动画的执行状态，默认为 running(paused 暂停)，js 可控制

七、渐变

颜色渐变是指在两个颜色之间平稳的过渡，CSS3 渐变包括

  • linear-gradient：线性渐变

background-image: linear-gradient(direction, color-stop1, color-stop2, …);

  • radial-gradient：径向渐变

linear-gradient(0deg, red, green);

八、其他

关于 CSS3 其他的新特性还包括 flex 弹性布局、Grid 栅格布局

除此之外，还包括多列布局、媒体查询、混合模式等等……