鱼仔布丁

17 CSS3新特性

5/30/2021 html

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. 媒体查询

# CSS3选择器

CSS3的语法是建立在CSS原先版本基础上的，它允许使用者在标签中指定特定的HTML元素而不必使用多余的class、ID或JavaScript。CSS选择器中的大部分并不是在CSS3中新添加的，只是在之前的版本中没有得到广泛的应用。如果想尝试实现一个干净的、轻量级的标签以及结构与表现更好的分离，高级选择器是非常有用的，它们可以减少在标签中的class和ID的数量并让设计师更方便地维护样式表 。

CSS 选择器 - CSS（层叠样式表） | MDN (opens new window) 伪类 - CSS（层叠样式表） | MDN (opens new window) CSS 选择器参考手册 (opens new window)

# CSS3文本

# 文本阴影

text-shadow：设置文本阴影。

语法： text-shadow: h-shadow v-shadow blur color;

属性值：

  • h-shadow {number} ：必需。水平阴影的位置。允许负值。
  • v-shadow {number} : 必需。垂直阴影的位置。允许负值。
  • blur {number} ：可选。模糊的距离。
  • color {color} ：可选。阴影的颜色。
h1{
  text-shadow: 5px 5px 5px #FF0000;
}

# 文本自动换行

word-wrap：属性允许长单词或 URL 地址换行到下一行。

语法： word-wrap: normal|break-word;

属性值：

  • normal ：只在允许的断字点换行（浏览器保持默认处理）。
  • break-word : 在长单词或 URL 地址内部进行换行。
div{
    word-wrap:break-word;
}

# 单词拆分

word-break：属性规定自动换行的处理方法。

语法： word-break: normal|break-all|keep-all; 属性值：

  • normal ：使用浏览器默认的换行规则。
  • break-all : 允许在单词内换行。
  • keep-all ：只能在半角空格或连字符处换行。
div {
    word-break: break-all;
}

# 文本拆分

text-wrap ：属性规定文本的换行（折行）规则。(主流浏览器都不支持)

语法： text-wrap: normal|none|unrestricted|suppress;

属性值：

  • normal ：只在允许的换行点进行换行。
  • none : 不换行。元素无法容纳的文本会溢出。
  • unrestricted ：在任意两个字符间换行。
  • suppress ：压缩元素中的换行。浏览器只在行中没有其他有效换行点时进行换行。
div {
    text-wrap:normal;
}

# 文本溢出

text-overflow ：属性规定当文本溢出包含元素时发生的事情。

语法： text-overflow: clip|ellipsis|string;

属性值：

  • clip ：修剪文本。
  • ellipsis : 显示省略符号来代表被修剪的文本。
  • string ：使用给定的字符串来代表被修剪的文本。

单行文本溢出

div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

多行文本溢出

div {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

# CSS3边框

CSS3对网页中的边框进行了一些改进，主要包括支持圆角边框、多层边框、边框色彩与图片等。在CSS3中最常用的一个改进就是圆角边框，通过CSS3的属性可以快速实现圆角定义，同时还可以根据实际情况针对特定角进行圆角定义 。

# 圆角边框

border-radius：属性是一个简写属性，用于设置四个 border-*-radius 属性。

语法： border-radius: 1-4 length|% / 1-4 length|%;

注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。

属性值：

  • length ：定义圆角的形状。
  • % : 以百分比定义圆角的形状。

实例1：

border-radius:20px;

等价于：

border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;

实例2：

border-radius:20px 30px;

等价于：

border-top-left-radius:20px;
border-top-right-radius:30px;
border-bottom-right-radius:20px;
border-bottom-left-radius:30px;

实例3：

border-radius:20px 30px 40px;

等价于：

border-top-left-radius:20px;
border-top-right-radius:30px;
border-bottom-right-radius:40px;
border-bottom-left-radius:30px;

实例4：

border-radius:20px 30px 40px 50px;

等价于：

border-top-left-radius:20px;
border-top-right-radius:30px;
border-bottom-right-radius:40px;
border-bottom-left-radius:50px;

# 边框阴影

box-shadow：属性向框添加一个或多个阴影。

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

注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

属性值：

  • h-shadow : 必需。水平阴影的位置。允许负值。指定阴影水平方向的偏移，即阴影在 x 轴的位置。值为正数时，阴影在元素的右侧；值为负数时，阴影在元素的左侧。
  • v-shadow : 必需。垂直阴影的位置。允许负值。设置阴影垂直方向的偏移，即阴影在 y 轴的位置。值为正数时，阴影在元素的下方；值为负数时，阴影在元素的上方。
  • blur ：可选。模糊距离。设置阴影的模糊半径，值为 0 意味着该阴影是固态而锋利的，完完全全没有模糊效果。blur 值越大，阴影则更不锋利而更朦胧 / 模糊。负值是不合法的，会被修正成 0。
  • spread :可选。阴影的尺寸。改变阴影的大小,其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值，则缩小。
  • color : 可选。阴影的颜色。请参阅 CSS 颜色值。
  • inset : 可选。将外部阴影 (outset) 改为内部阴影。
div {
    width: 300px;
    height: 500px;
    box-shadow: 5px 10px 20px 20px red;
}

# 边框图片

border-image 属性是一个简写属性，用于设置以下属性：

border-image-source border-image-slice border-image-width border-image-outset border-image-repeat

如果省略值，会设置其默认值。

语法： border-image：source slice width outset repeat

属性值：

  • source {string} ：用在边框的图片的路径。
  • slice {number} ：图片边框向内偏移。
  • width {number} ：图片边框的宽度。
  • outset {number} ：边框图像区域超出边框的量。
  • repeat {string} ：图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)。
div {
    border: 5px solid transparent;
    border-image: url(img/border.png) 27 round;
}

# CSS3背景

CSS3允许使用多个属性（比如background-image、background-repeat、background-size、background-position、background-origin和background-clip等）在一个元素上添加多层背景图片。该属性的应用大大改善了以往面对多层次设计需要多层布局的问题，帮助Web前端开发者在不借助Photoshop的情况下实现对页面背景的设计，简化了背景图片的维护成本。

# background-size

background-size：属性规定背景图像的尺寸。

语法： background-size: length|percentage|cover|contain;

属性值：

  • length：设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
  • percentage：以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
  • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
  • contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
div {
    background:url('images/bg.png');
    background-size: 100% 100%;
}

# background-image

background-image：属性设置一个元素的背景图像。

语法： background-image: url('图片地址1')，url('图片地址2');

属性值：

  • url {string} ：图像的URL。
  • none ：无图像背景会显示。这是默认。
  • inherit ：指定背景图像应该从父元素继承。
div {
    background-image: url('images/bg.png');
}

# background-origin

background-origin：属性指定了背景图像的位置区域。

语法： background-origin: padding-box|border-box|content-box;

属性值：

  • padding-box ： 背景图像相对于内边距框来定位。
  • border-box : 背景图像相对于边框盒来定位。
  • content-box ： 背景图像相对于内容框来定位。
background-image:url('smiley.gif');
background-position:left;
background-repeat:no-repeat;
background-origin:content-box;

# background-clip

background-clip：属性规定背景的绘制区域。

语法： background-clip: border-box|padding-box|content-box;

属性值：

  • border-box ：背景被裁剪到边框盒。
  • padding-box ：背景被裁剪到内边距框。
  • content-box ：背景被裁剪到内容框。
background-color:yellow;
background-clip:content-box;

# CSS3颜色

# RGBA

RGBA(R,G,B,A)

语法： background: RGBA(R,G,B,A);

取值：

  • R：红色值。正整数 | 百分数
  • G：绿色值。正整数 | 百分数
  • B：蓝色值。正整数 | 百分数
  • A：Alpha透明度。取值0~1之间。
background: rgba(0, 0, 0, .5);

# HSL

HSL(H,S,L)

语法： background-color: hsl(h, s, l); 取值：

  • H：Hue(色调) 。0(或360) 表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
  • S：Saturation(饱和度) 。取值为：0.0% - 100.0%
  • L：Lightness(亮度) 。取值为：0.0% - 100.0%
background-color: hsl(360, 50%, 50%);

# HSLA

HSLA(H,S,L,A)

取值：

  • H：Hue(色调) 。0(或360) 表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
  • S：Saturation(饱和度) 。取值为：0.0% - 100.0%
  • L：Lightness(亮度) 。取值为：0.0% - 100.0%
  • A：Alpha透明度。取值0~1之间。
background-color: hsla(360, 50%, 50%, .5);

# Opacity

opacity:属性设置元素的不透明级别。

语法： opacity: value|inherit;

取值：

  • value: 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。
  • inherit: 应该从父元素继承 opacity 属性的值。
opacity: 0.5;

# CSS3渐变

# 线性渐变

创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

语法： background: linear-gradient(direction, color-stop1, color-stop2, ...);

.div1 {
/* 从上到下的渐变（默认情况下） */
background: linear-gradient(red, blue);
}
.div2 {
/* 从左到右的渐变 */
background: linear-gradient(to right，red, blue);
}
.div3 {
/* 从左上角到右下角的渐变 */
background: linear-gradient(to bottom right，red, blue);
}

# 径向渐变

创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

语法： background: radial-gradient(center, shape size, start-color, ..., last-color);

.div1 {
/* 颜色结点均匀分布的径向渐变 */
background: radial-gradient(red, green, blue);
}
.div2 {
/* 颜色结点不均匀分布的径向渐变 */
background: radial-gradient(red 5%, green 15%, blue 60%);
}
.div3 {
/* 形状为圆形的径向渐变 */
background: radial-gradient(circle, red, yellow, green);
}

# 文字渐变

div {
background-image: -webkit-linear-gradient(45deg,#f35626,#feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

# CSS3盒模型 box-sizing

box-sizing 属性允许以特定的方式定义匹配某个区域的特定元素。

语法： box-sizing: content-box|border-box|inherit;

属性值：

  • content-box ：这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
  • border-box ：为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
  • inherit ：规定应从父元素继承 box-sizing 属性的值。
box-sizing:border-box;
更新时间: Monday, May 31, 2021 21:57

18 CSS3 变换，动画