【响应式Web设计】读书笔记 - CSS（三） - 10
【简介】文字阴影特效、盒阴影特效、线性渐变、径向渐变
1. 文字阴影特效
基本语法：
.element {
text-shadow: 1px 1px 1px #ccc;
}缩写值的规则是先右后下；第一个值是阴影的右侧偏移量，第二个值是阴影的下偏移量，第三个值是模糊距离（因一个从有到无的渐变距离），最后一个是色值。
同时，我们可以添加多个阴影特效，通过逗号分割即可：
.multiple {
text-shadow: 0 1px #fff, 4px 4px 0 #dad7d7;
}我们通过实例来演示上面两个效果：
其中 HTML 片段：
<p class="ex1">ex1. 文字阴影效果p>
<p class="ex2">ex2. 文字阴影效果p>
<p class="ex3">ex3. 文字阴影效果p>CSS 片段：
p {
font-size: 20px;
font-weight: 700;
padding-left: 30px;
}
.ex1 {
text-shadow: 1px 1px 1px red;
}
.ex2 {
text-shadow: 1px 1px 1px #666;
}
.ex3 {
text-shadow: 0 1px red, 4px 4px 0 green;
}2. 盒阴影
盒阴影容许你在元素的内部或者外部创建盒状的阴影效果，它的语法和文字阴影相似：水平偏移量、垂直偏移量、模糊距离、阴影尺寸、以及阴影颜色：
.shadow {
box-shadow: 0 3px 5px #444;
}默认的 box-shadow 是设置在原始外部的，另外一个可选关键词 inset 容许在元素内部使用 box-shadow。例如：
.shadow {
box-shadow: inset 0 0 10px #000;
}我们通过实例来演示：
其中 HTML 部分：
<body>
<div class="ex1">元素外部的盒阴影div>
<div class="ex2">元素内部的盒阴影div>
body>其中 CSS 部分：
body {
display: flex;
}
div {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
width: 200px;
border: 1px solid #666;
margin: 20px;
}
.ex1 {
box-shadow: 0 3px 5px #444;
}
.ex2 {
box-shadow: inset 0 0 10px #000;
}3. 线性渐变
线性渐变用于创建一个从一种颜色渐变到另一种颜色的渐变背景。例如对于一个长 300px，宽 100px 的 div：
<div class="linear-gradient">div>
div {
width: 300px;
height: 100px;
margin: 40px;
}给该 div 设置 CSS：
.linear-gradient {
background: linear-gradient(red, blue);
}则会创建一个从红色渐变为蓝色的渐变背景。
若给该 div 设置 CSS：
.linear-gradient {
background: linear-gradient(to top right, red, blue);
}则会创建一个从底部左侧到顶部右侧的渐变背景：
若需要有多个颜色的渐变，需要引入「信标」，用于把渐变中的某个点设定为特定颜色。渐变效果中的色标是用逗号进行分割的。第一部分是颜色，第二部分是颜色的位置。
例如给上述 div 添加 CSS：
.linear-gradient {
background: linear-gradient(#f90 0, #f90 2%, #555 2%, #eee 50%, #555 98%, #f90 98%, #f90 100%);
}则会显示：
4. 径向渐变
用于创建一个从一个中心发散成为圆形或者椭圆形的渐变效果。
例如：
<html>
<head>
<title>title>
<style type="text/css">
.radial-gradient {
width: 300px;
height: 100px;
margin: 40px;
background: radial-gradient(12rem circle at bottom, yellow, orange, red);
}
style>
head>
<body>
<div class="radial-gradient">div>
body>
html>
其中 background: radial-gradient(12rem circle at bottom, yellow, orange, red); 在第一个逗号前，定义渐变形状、大小和所在位置。