CSS 常用方法整理

CSS 2D 转换

CSS 转换（transforms）允许您移动、旋转、缩放和倾斜元素。

transform

CSS 2D 转换方法
通过使用 CSS transform 属性，您可以利用以下 2D 转换方法：

translate()
    // 方法从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）。
    //<div> 元素从其当前位置向右移动 50 个像素，并向下移动 100 个像素：
    div {
    
    
      transform: translate(50px, 100px);
    }

rotate()
    //rotate() 方法根据给定的角度顺时针或逆时针旋转元素。
    //<div> 元素顺时针旋转 20 度：
    div {
    
    
      transform: rotate(20deg);
    }

scaleX()
	//scaleX() 方法增加或减少元素的宽度。
	// <div> 元素增大为其原始宽度的两倍：
	div {
    
    
      transform: scaleX(2);
    }
scaleY()
	//scaleY() 方法增加或减少元素的高度。
	//<div> 元素增大到其原始高度的三倍：
    div {
    
    
      transform: scaleY(3);
    }
scale()
	//scale() 方法增加或减少元素的大小（根据给定的宽度和高度参数）。
	//<div> 元素增大为其原始宽度的两倍和其原始高度的三倍：
    div {
    
    
      transform: scale(2, 3);
    }
skewX()
	//skewX() 方法使元素沿 X 轴倾斜给定角度。
	//<div> 元素沿X轴倾斜 20 度：
	div {
    
    
      transform: skewX(20deg);
    }
skewY()
	//skewY() 方法使元素沿 Y 轴倾斜给定角度。
	//<div> 元素沿 Y 轴倾斜 20 度：
	div {
    
    
      transform: skewY(20deg);
    }
skew()
	//skew() 方法使元素沿 X 和 Y 轴倾斜给定角度。
	//<div> 元素沿 X 轴倾斜 20 度，同时沿 Y 轴倾斜 10 度：
	div {
    
    
      transform: skew(20deg, 10deg);
    }
matrix()
	matrix() 方法把所有 2D 变换方法组合为一个。

    matrix() 方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素。

参数如下：matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

CSS 3D 转换

transform

CSS 3D 转换方法
通过 CSS transform 属性，您可以使用以下 3D 转换方法：

rotateX()
	//rotateX() 方法使元素绕其 X 轴旋转给定角度：
	#myDiv {
    
    
      transform: rotateX(150deg);
    }
rotateY()
	//rotateY() 方法使元素绕其 Y 轴旋转给定角度：
	#myDiv {
    
    
      transform: rotateY(130deg);
    }
rotateZ()
	//rotateZ() 方法使元素绕其 Z 轴旋转给定角度：
	#myDiv {
    
    
      transform: rotateZ(90deg);
    }

CSS过渡

transition

如果需要创建过渡效果，必须明确两件事

​ 一、你要添加效果 CSS 属性

​ 二、 效果的持续时间

如果未规定时间部分， 则过渡不会有效果，因为默认值为 0。

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div:hover {
  width: 300px;
}

// 改变若干个属性
div {
  transition: width 2s, height 4s;
}

指定过渡的速度曲线

transition-timing-function 属性规定过渡效果的速度曲线。

ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
linear - 规定从开始到结束具有相同速度的过渡效果
ease-in -规定缓慢开始的过渡效果
ease-out - 规定缓慢结束的过渡效果
ease-in-out - 规定开始和结束较慢的过渡效果
cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值

#div1 {
    
    transition-timing-function: linear;}
#div2 {
    
    transition-timing-function: ease;}
#div3 {
    
    transition-timing-function: ease-in;}
#div4 {
    
    transition-timing-function: ease-out;}
#div5 {
    
    transition-timing-function: ease-in-out;}

延迟过渡效果

transition-delay 属性规定过渡效果的延迟（以秒计）。

下例在启动之前有 1 秒的延迟：

div {
    
    
  transition-delay: 1s;
}

CSS动画

什么是 CSS 动画？

动画使元素逐渐从一种样式变为另一种样式。

您可以随意更改任意数量的 CSS 属性。

如需使用 CSS 动画，您必须首先为动画指定一些关键帧。

关键帧包含元素在特定时间所拥有的样式。

@keyframes 规则

如果您在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。

扫描二维码关注公众号，回复： 13558332 查看本文章

要使动画生效，必须将动画绑定到某个元素。

下面的例子将 “example” 动画绑定到

元素。动画将持续 4 秒钟，同时将

元素的背景颜色从 “red” 逐渐改为 “yellow”：

/* 动画代码 */
@keyframes example {
    
    
  from {
    
    background-color: red;}
  to {
    
    background-color: yellow;}
}

/* 向此元素应用动画效果 */
div {
    
    
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

注意：animation-duration 属性定义需要多长时间才能完成动画。如果未指定 animation-duration 属性，则动画不会发生，因为默认值是 0s（0秒）。

在上面的例子中，通过使用关键字 “from” 和 “to”（代表 0％（开始）和 100％（完成）），我们设置了样式何时改变。

您也可以使用百分比值。通过使用百分比，您可以根据需要添加任意多个样式更改。

下面的例子将在动画完成 25％，完成 50％ 以及动画完成 100％ 时更改

元素的背景颜色：

/* 动画代码 */
@keyframes example {
    
    
  0%   {
    
    background-color: red;}
  25%  {
    
    background-color: yellow;}
  50%  {
    
    background-color: blue;}
  100% {
    
    background-color: green;}
}

/* 应用动画的元素 */
div {
    
    
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

延迟动画

animation-delay 属性规定动画开始的延迟时间。

下面的例子在开始动画前有 2 秒的延迟：

div {
    
    
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

负值也是允许的。如果使用负值，则动画将开始播放，如同已播放 N 秒。

在下面的例子中，动画将开始播放，就好像它已经播放了 2 秒钟一样：

div {
    
    
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

设置动画应运行多少次

animation-iteration-count 属性指定动画应运行的次数。

下面的例子在停止前把动画运行 3 次：

div {
    
    
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

下面的例子使用值 “infinite” 使动画永远持续下去：

div {
    
    
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

反向或交替运行动画

animation-direction 属性指定是向前播放、向后播放还是交替播放动画。

animation-direction 属性可接受以下值：

normal - 动画正常播放（向前）。默认值
reverse - 动画以反方向播放（向后）
alternate - 动画先向前播放，然后向后
alternate-reverse - 动画先向后播放，然后向前

指定动画的速度曲线

animation-timing-function 属性规定动画的速度曲线。

animation-timing-function 属性可接受以下值：

ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
linear - 规定从开始到结束的速度相同的动画
ease-in - 规定慢速开始的动画
ease-out - 规定慢速结束的动画
ease-in-out - 指定开始和结束较慢的动画
cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值

指定动画的填充模式

CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fill-mode 属性能够覆盖这种行为。

在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。

animation-fill-mode 属性可接受以下值：

none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

动画简写属性

下例使用六种动画属性：

div {
    
    
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

使用简写的 animation 属性也可以实现与上例相同的动画效果：

div {
    
    
  animation: example 5s linear 2s infinite alternate;
}

CSS背景

CSS background-color

background-color 属性指定元素的背景色。 您可以为任何 HTML 元素设置背景颜色 。

body {
    
    
  background-color: lightblue;
}

不透明度 / 透明度

opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明：

div {
    
    
  background-color: green;
  opacity: 0.3;
} 

**注意：**使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。

使用 RGBA 的透明度

RGBA 颜色值指定为：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

div {
    
    
  background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */
}

CSS 背景图像

background-image 属性指定用作元素背景的图像。

默认情况下，图像会重复，以覆盖整个元素。

body {
    
    
  background-image: url("paper.gif");
}

CSS background-repeat

默认情况下，background-image 属性在水平和垂直方向上都重复图像。

如需垂直重复水平方向重复 (background-repeat: repeat-x;)
如需垂直重复图像，请设置 background-repeat: repeat-y;

CSS background-repeat: no-repeat

background-repeat 属性还可指定只显示一次背景图像：

CSS background-position

background-position 属性用于指定背景图像的位置。

body {
    
    
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

CSS background-attachment

background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）：

指定应该固定背景图像：background-attachment: fixed;
指定背景图像应随页面的其余部分一起滚动：background-attachment: scroll;

CSS 多重背景

CSS 允许您通过 background-image 属性为一个元素添加多幅背景图像。

不同的背景图像用逗号隔开，并且图像会彼此堆叠，其中的第一幅图像最靠近观看者。

#example1 {
    
    
  background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

CSS 背景尺寸

CSS background-size 属性允许您指定背景图像的大小。

可以通过长度、百分比或使用以下两个关键字之一来指定背景图像的大小：contain 或 cover。

#div1 {
    
    
  background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

background-size 的其他两个可能的值是 contain 和 cover。

contain 关键字将背景图像缩放为尽可能大的尺寸（但其宽度和高度都必须适合内容区域）。这样，取决于背景图像和背景定位区域的比例，可能存在一些未被背景图像覆盖的背景区域。

cover 关键字会缩放背景图像，以使内容区域完全被背景图像覆盖（其宽度和高度均等于或超过内容区域）。这样，背景图像的某些部分可能在背景定位区域中不可见。

定义多个背景图像的尺寸

在处理多重背景时，background-size 属性还可以接受多个设置背景尺寸的值（使用逗号分隔的列表）。

下面的例子指定了三幅背景图像，每幅图像有不同的 background-size 值：

#example1 {
    
    
  background: url(tree.png) left top no-repeat, url(flower.gif) right bottom no-repeat, 
  	url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

全尺寸背景图像

现在，我们希望网站上的背景图像始终覆盖整个浏览器窗口。

具体要求如下：

• 用图像填充整个页面（无空白）
• 根据需要缩放图像
• 在页面上居中图像
• 不引发滚动条

html {
    
    
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

Hero Image

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
      
      
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.hero-image {
      
      
  background: url(/i/photo/tiyugongyuan.jpg) no-repeat center; 
  background-size: cover;
  height: 500px;
  position: relative;
}

.hero-text {
      
      
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}
</style>
</head>
<body>

<div class="hero-image">
  <div class="hero-text">
    <h1 style="font-size:50px">我是比尔盖茨</h1>
    <h3>我是一位摄影师</h3>
    <button>聘请我吧</button>
  </div>
</div>

<p>页面内容..</p>
<p>请注意，这项技术会将使图像响应：请调整浏览器窗口的大小来查看效果。</p>

</body>
</html>

CSS background-origin 属性

CSS background-origin 属性指定背景图像的位置。

该属性接受三个不同的值：

border-box - 背景图片从边框的左上角开始
padding-box -背景图像从内边距边缘的左上角开始（默认）
content-box - 背景图片从内容的左上角开始

CSS background-clip 属性

CSS background-clip 属性指定背景的绘制区域。

该属性接受三个不同的值：

border-box - 背景绘制到边框的外部边缘（默认）
padding-box - 背景绘制到内边距的外边缘
content-box - 在内容框中绘制背景

CSS 布局 - width 和 max-width

max-width 可以改善浏览器对小窗口的处理。为了使网站在小型设备上可用。

CSS 轮廓

轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素。

CSS 拥有如下轮廓属性：

outline-style
outline-color
outline-width
outline-offset
outline

轮廓与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。

CSS 轮廓样式

outline-style 属性指定轮廓的样式，并可设置如下值：

    dotted - 定义点状的轮廓。
    dashed - 定义虚线的轮廓。
    solid - 定义实线的轮廓。
    double - 定义双线的轮廓。
    groove - 定义 3D 凹槽轮廓。
    ridge - 定义 3D 凸槽轮廓。
    inset - 定义 3D 凹边轮廓。
    outset - 定义 3D 凸边轮廓。
    none - 定义无轮廓。
    hidden - 定义隐藏的轮廓。

CSS 轮廓宽度

outline-width 属性指定轮廓的宽度，并可设置如下值之一：

    thin（通常为 1px）
    medium（通常为 3px）
    thick （通常为 5px）
    特定尺寸（以 px、pt、cm、em 计）

CSS 轮廓颜色

outline-color 属性用于设置轮廓的颜色。

    可以通过以下方式设置颜色：

    name - 指定颜色名，比如 "red"
    HEX - 指定十六进制值，比如 "#ff0000"
    RGB - 指定 RGB 值，比如 "rgb(255,0,0)"
    HSL - 指定 HSL 值，比如 "hsl(0, 100%, 50%)"
    invert - 执行颜色反转（确保轮廓可见，无论是什么颜色背景）

CSS Outline - 简写属性

outline 属性是用于设置以下各个轮廓属性的简写属性：

outline-width
outline-style（必需）
outline-color
从上面的列表中，outline 属性可指定一个、两个或三个值。值的顺序无关紧要。

CSS 轮廓偏移

outline-offset 属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。

outline-offset: 25px;

CSS 文本

文本颜色

color 属性用于设置文本的颜色。颜色由以下值指定：

颜色名 - 比如 "red"
十六进制值 - 比如 "#ff0000"
RGB 值 - 比如 "rgb(255,0,0)"

CSS 文本对齐

文本对齐
text-align 属性用于设置文本的水平对齐方式。

文本可以左对齐或右对齐，或居中对齐。

text-align: center;
text-align: left;
text-align: right;
text-align: justify;
当 text-align 属性设置为 "justify" 后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的（就像在杂志和报纸中）

文本方向

direction 和 unicode-bidi 属性可用于更改元素的文本方向

p {
    
    
  direction: rtl;
  unicode-bidi: bidi-override;
}

垂直对齐

vertical-align 属性设置元素的垂直对齐方式。

img.top {
    
    
  vertical-align: top;
}

img.middle {
    
    
  vertical-align: middle;
}

img.bottom {
    
    
  vertical-align: bottom;
}

文字装饰

text-decoration 属性用于设置或删除文本装饰。

text-decoration: none; 通常用于从链接上删除下划线：


h1 {
    
    
  text-decoration: overline; 上划线
}

h2 {
    
    
  text-decoration: line-through; 中划线
}

h3 {
    
    
  text-decoration: underline; 下划线
}

文本转换

text-transform 属性用于指定文本中的大写和小写字母。
p.uppercase {
    
    
  text-transform: uppercase; 大写
}

p.lowercase {
    
    
  text-transform: lowercase; 小写
}

p.capitalize {
    
    
  text-transform: capitalize; 首字母大写
}

CSS 文字间距

文字缩进

text-indent 属性用于指定文本第一行的缩进：

p {
    
    
  text-indent: 50px;
}

字母间距

letter-spacing 属性用于指定文本中字符之间的间距。

h1 {
    
    
  letter-spacing: 3px;
}

h2 {
    
    
  letter-spacing: -3px;
}

行高

line-height 属性用于指定行之间的间距：

p.small {
    
    
  line-height: 0.8;
}

p.big {
    
    
  line-height: 1.8;
}

字间距

word-spacing 属性用于指定文本中单词之间的间距。

h1 {
    
    
  word-spacing: 10px;
}

h2 {
    
    
  word-spacing: -5px;
}

空白

white-space 属性指定元素内部空白的处理方式。

p {
    
    
  white-space: nowrap;
}

文本阴影

text-shadow 属性为文本添加阴影。

text-shadow: 2px 2px 5px red;
水平 垂直 模糊 颜色

CSS 布局 - 溢出

CSS overflow 属性控制对太大而区域无法容纳的内容的处理方式。

CSS Overflow

overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。

overflow 属性可设置以下值：

• visible - 默认。溢出没有被剪裁。内容在元素框外渲染
• hidden - 溢出被剪裁，其余内容将不可见
• scroll - 溢出被剪裁，同时添加滚动条以查看其余内容
• auto - 与 scroll 类似，但仅在必要时添加滚动条

**注释：**overflow 属性仅适用于具有指定高度的块元素。

**注释：**在 OS X Lion（在 Mac 上）中，滚动条默认情况下是隐藏的，并且仅在使用时显示（即使设置了 “overflow:scroll”）。

overflow-x 和 overflow-y 属性规定是仅水平还是垂直地（或同时）更改内容的溢出：

• overflow-x 指定如何处理内容的左/右边缘。
• overflow-y 指定如何处理内容的上/下边缘。

CSS 伪类

什么是伪类？

伪类用于定义元素的特殊状态。

例如，它可以用于：

• 设置鼠标悬停在元素上时的样式
• 为已访问和未访问链接设置不同的样式
• 设置元素获得焦点时的样式

/* 未访问的链接 */
a:link {
    
    
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
    
    
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
    
    
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
    
    
  color: #0000FF;
}

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

CSS 伪元素

什么是伪元素？

CSS 伪元素用于设置元素指定部分的样式。

例如，它可用于：

• 设置元素的首字母、首行的样式
• 在元素的内容之前或之后插入内容

::first-line 伪元素

::first-line 伪元素用于向文本的首行添加特殊样式。

注意：::first-line 伪元素只能应用于块级元素。

以下属性适用于 ::first-line 伪元素：

• 字体属性
• 颜色属性
• 背景属性
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

::first-letter 伪元素

::first-letter 伪元素用于向文本的首字母添加特殊样式。

注意：****::first-letter 伪元素只适用于块级元素。

下面的属性适用于 ::first-letter 伪元素：

• 字体属性
• 颜色属性
• 背景属性
• 外边距属性
• 内边距属性
• 边框属性
• text-decoration
• vertical-align（仅当 “float” 为 “none”）
• text-transform
• line-height
• float
• clear

::before 伪元素

::before 伪元素可用于在元素内容之前插入一些内容。

h1::before {
    
    
  content: url(smiley.gif);
}

::after 伪元素

::after 伪元素可用于在元素内容之后插入一些内容。

h1::after {
    
    
  content: url(smiley.gif);
}

::selection 伪元素

::selection 伪元素匹配用户选择的元素部分。

以下 CSS 属性可以应用于 ::selection：

• color
• background
• cursor
• outline

CSS 属性选择器

CSS [attribute] 选择器
[attribute] 选择器用于选取带有指定属性的元素。

	a[target] {
    
    
      background-color: yellow;
    }

==============================================

CSS [attribute="value"] 选择器
[attribute="value"] 选择器用于选取带有指定属性和值的元素。

a[target=_blank] {
    
    
  background-color: yellow;
}

==============================================

CSS [attribute~="value"] 选择器
[attribute~="value"] 选择器选取属性值包含指定词的元素。

[title~="flower"] {
    
    
  border: 5px solid yellow;
}

上面的例子会匹配以下属性的元素：title="flower"、title="summer flower" 以及 title="flower new"，但不匹配：title="my-flower" 或 title="flowers"。

==============================================

CSS [attribute|="value"] 选择器
[attribute|="value"] 选择器用于选取指定属性以指定值开头的元素。
注释：值必须是完整或单独的单词，比如 class="top" 或者后跟连字符的，比如 class="top-text"。

[class|="top"] {
    
    
  background: yellow;
}

==============================================

CSS [attribute^="value"] 选择器
[attribute^="value"] 选择器用于选取指定属性以指定值开头的元素。

下例选取 class 属性以 "top" 开头的所有元素：
提示：值不必是完整单词！

[class^="top"] {
    
    
  background: yellow;
}

==============================================

CSS [attribute$="value"] 选择器
[attribute$="value"] 选择器用于选取指定属性以指定值结尾的元素。

下例选取 class 属性以 "test" 结尾的所有元素：

提示：值不必是完整单词！

[class$="test"] {
    
    
  background: yellow;
}

==============================================

CSS [attribute*="value"] 选择器
[attribute*="value"] 选择器选取属性值包含指定词的元素。

下例选取 class 属性包含 "te" 的所有元素：

提示：值不必是完整单词！

[class*="te"] {
    
    
  background: yellow;
}

CSS 渐变

CSS 渐变使您可以显示两种或多种指定颜色之间的平滑过渡。

CSS 定义了两种渐变类型：

• 线性渐变（向下/向上/向左/向右/对角线）
• 径向渐变（由其中心定义）

CSS 线性渐变

如需创建线性渐变，您必须定义至少两个色标。色标是您要呈现平滑过渡的颜色。您还可以设置起点和方向（或角度）以及渐变效果。

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

使用角度百分百

如果希望对渐变角度做更多的控制，您可以定义一个角度，来取代预定义的方向（向下、向上、向右、向左、向右下等等）。值 0deg 等于向上（to top）。值 90deg 等于向右（to right）。值 180deg 等于向下（to bottom）。

background-image: linear-gradient(90deg, red, yellow);


background-image: linear-gradient(red 10%, green 85%, blue 90%);

使用透明度

CSS 渐变还支持透明度，也可用于创建渐变效果。

如需添加透明度，我们使用 rgba() 函数来定义色标。 rgba() 函数中的最后一个参数可以是 0 到 1 的值，它定义颜色的透明度：0 表示全透明，1 表示全彩色（无透明）。

#grad {
    
    
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

重复线性渐变

repeating-linear-gradient() 函数用于重复线性渐变：


#grad {
    
    
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

CSS 径向渐变

径向渐变由其中心定义。

如需创建径向渐变，您还必须定义至少两个色标。

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

默认地，shape 为椭圆形，size 为最远角，position 为中心。


#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

使用大小不同的关键字

size 参数定义渐变的大小。它可接受四个值：

• closest-side
• farthest-side
• closest-corner
• farthest-corner

重复径向渐变

repeating-radial-gradient() 函数用于重复径向渐变：

CSS 媒体查询

CSS2 引入了媒体类型

CSS2 中引入了 @media 规则，它让为不同媒体类型定义不同样式规则成为可能。

例如：您可能有一组用于计算机屏幕的样式规则、一组用于打印机、一组用于手持设备，甚至还有一组用于电视，等等。

不幸的是，除了打印媒体类型之外，这些媒体类型从未得到过设备的大规模支持。

CSS3 引入了媒体查询

CSS3 中的媒体查询扩展了 CSS2 媒体类型的概念：它们并不查找设备类型，而是关注设备的能力。

媒体查询可用于检查许多事情，例如：

• 视口的宽度和高度
• 设备的宽度和高度
• 方向（平板电脑/手机处于横向还是纵向模式）
• 分辨率

使用媒体查询是一种流行的技术，可以向台式机、笔记本电脑、平板电脑和手机（例如 iPhone 和 Android 手机）提供定制的样式表。

媒体查询语法

媒体查询由一种媒体类型组成，并可包含一个或多个表达式，这些表达式可以解析为 true 或 false。

@media not|only mediatype and (expressions) {
    
    
  CSS-Code;
}

如果指定的媒体类型与正在显示文档的设备类型匹配，并且媒体查询中的所有表达式均为 true，则查询结果为 true。当媒体查询为 true 时，将应用相应的样式表或样式规则，并遵循正常的级联规则。

除非您使用 not 或 only 运算符，否则媒体类型是可选的，且隐含 all 类型。

您还可以针对不同的媒体使用不同的样式表：

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">