HTML5&CSS3笔记：用 CSS3 创造令人惊艳的美

你的名字 2022-07-15 16:18 228阅读 0赞

为什么 CSS3 对响应式设计非常有用:

使用 CSS3 替代图片，在有带宽限制的网页中可有效减少 http 请求(从而使网页加载更快)，并可使网页更灵活、更容易维护。

这些优点甚至在传统的固定宽度桌面版网页中也很有用，但它们在响应式设计中更为重要，因此它们可以让网页在不同的视口中显示不同尺寸的模块或文字阴影，而不需要为此单独制作和导出图片。

## 文字阴影 ##

文字阴影的基本语法：

.element { text-shadow: 1px 1px 1px #cccccc; }

记住，阴影值的速记规则永远是先向右再向下。因此，第一个值指的是右侧阴影的大小， 第二个值指的是下方阴影的大小，第三个值指的是模糊距离(即阴影从开始变淡到完全消失的距离)，最后一个值是阴影颜色。

**HEX、HSL 或 RGB 颜色都可以**

text-shadow: 4px 4px 0px hsla(140, 3%, 26%, 0.4);
    但要注意浏览器必须得同时支持 HSL/RGB 颜色和 text-shadow 才能渲染出效果。

**px、em 或 rem 都行**

text-shadow: .039215686em .039215686em 0em #dad7d7; /* 4 ÷ 102 */

其实很会少用 em 或 rem 作为阴影大小的单位——因为阴影一般都比较小，一个或两个像素的阴影，在所有视口中的效果都很不错。

**取消文字阴影**

text-shadow: none;

**左上方阴影**

使用负值可以制作出左上方阴影效果：

text-shadow: -4px -4px 0px #dad7d7;

**制作浮雕文字阴影效果**

text-shadow 很适合用来制作浮雕文字。这种效果一般最适合应用在非白色背景的深色文字上，搭配以高亮颜色(如纯白色或类似颜色)的阴影。

nav ul li a { text-shadow: 0 1px 0 hsla(0, 0%, 100%, 0.75); }

想要最好的浮雕文字效果：不要模糊，不要水平阴影，仅在垂直方向设置 1 或 2 像素的“白影”即可。

**多重文字阴影**

我们还可以制作多重文字阴影，只需将两组值使用逗号分隔开即可，比如：

text-shadow: 0px 1px #ffffff,4px 4px 0px #dad7d7;

之前精妙的浮雕效果必不可少，否则文字会变模糊。所以这个声明合并了已有的投影效果和上一节的浮雕效果。

## 盒阴影 ##

盒阴影的语法与文字阴影完全一样:水平偏移距离、垂直偏移距离、模糊半径，以及阴影颜色：

box-shadow: 0px 3px 5px #444444;

但是，盒阴影的的跨浏览器支持并不好，所以明智的做法是使用浏览器私有前缀，例如:

-ms-box-shadow: 0px 3px 5px #444444;
     -moz-box-shadow: 0px 3px 5px #444444;
     -webkit-box-shadow: 0px 3px 5px #444444;
     box-shadow: 0px 3px 5px #444444;

**内阴影**

box-shadow 属性可以用来制作内阴影——出现在元素内部，而不是外部。内阴影可用来制作光晕效果。

box-shadow:inset 0 0 40px #000000;

**多重阴影**

和文字阴影一样，盒阴影也可以有多重阴影效果。语法也类似，即将两组值用逗号分开，这样两组阴影就会按照代码中的先后顺序从上到下应用到元素上。换句话说，就是代码中先声明的规则，在浏览器中会覆盖下面的规则。

box-shadow: inset 0 0 30px hsl(0, 0%, 0%),
                inset 0 0 70px hsla(0, 97%, 53%, 1);

## 背景渐变 ##

**线性背景渐变**

background: linear-gradient(90deg, #ffffff 0%, #e4e4e4 50%, #ffffff 100%);

背景渐变唯一美中不足的是它不像其他一些 CSS3 特性那样被广泛支持。比如 IE 9 就没有对它的原生支持。其他大多数浏览器都支持背景渐变，不过都是以私有前缀方式。不过这并不足以阻止你使用该特性来增强设计效果，因为有很多浏览器现在已经支持该特性，而剩下的浏览器在不久的将来也会支持。作为老版本浏览器的降级方案，最好先定义一个固定背景颜色，这样老版本浏览器在无法识别渐变规则的时候，至少会渲染出一个实色的背景。

分解线性渐变语法：

圆括号中的第一个值(即例子中的 90deg，可选)定义了渐变的方向。不定义该值则默认是一个垂直从顶部到底部的渐变。你还可以使用如 to top right 这样的值，这会产生一个朝向右上角的对角线渐变。
    
    下一个值(例子中的#ffffff 0%)定义的是渐变的“起点”，包括起点的颜色和位置。你也可以使用像 blue 20%这样的值，这样就是从蓝色开始渐变到下一个颜色，而渐变开始位置则位于假想的渐变路径的20%处。同样，起点位置也可以使用负值，这样渐变从实际可见区域之外就开始了。
    
    下一个值指的是“过渡颜色点”。我们来回顾一下:沿着 90 度垂直方向，从白色开始 ((#ffffff 0%)，向位于渐变路径 50%处的#e4e4e4 这个颜色(浅灰色)渐变。这里就是渐变中的第一个过渡颜色点。如果需要的话，可以在渐变“终点”之前定义更多的过渡颜色点(使用逗号分隔)。
    
    圆括号中的最后一个值始终是渐变的“终点”。不论在起点之后放置了多少个过渡颜色点，最后一个值始终是终点。

想要了解线性渐变的 W3C 规范，请参阅 [http://dev.w3.org/csswg/css3-images/\#linear-gradients][http_dev.w3.org_csswg_css3-images_linear-gradients]。

**径向背景渐变**

CSS3 背景渐变不只局限于线性渐变，制作径向渐变同样简单。径向渐变是从一个中心点开始，依据椭圆形或圆形进行扩张渐变。

background: radial-gradient(center, ellipse cover, #ffffff 72%, #dddddd 100%);

分解径向渐变语法：

在 background 属性之后，我们设定的值是 radial-gradient(而不是 linear-gradient)。 然后在圆括号中设定起点。在上一节的例子中我们用的是 center，其实也可以使用如 25px 25px 这样的值，这就表示从距元素上边和左边均为 25 像素的那个点开始渐变。
    
    声明中的下一个值（ellipse cover）更简单，它指的是径向渐变的形状和大小。
    渐变形状要么是 circle(圆形，渐变会均匀地向各个方向辐射)，要么是 ellipse(椭圆形，在不同的方向辐射量不同)。而渐变形状的大小则有很大的灵活性，大小值可以是下列任何一种： closest-side、closest-corner、farthest-side、cover、contain。
    
    接下来是定义渐变起点、过渡颜色点以及终点(这部分和线性渐变是一样的)。

示例：

background: radial-gradient(20px 20px, circle cover,
                                hsla(9,69%,85%,0.5) 0%,
                                hsla(9,76%,63%,1) 50%,
                                hsla(10,98%,46%,1) 51%,
                                hsla(24,100%,50%,1) 75%,
                                hsla(10,100%,39%,1) 100%);

想要了解 W3C 对背景渐变的标准定义，请参阅 [http://dev.w3.org/csswg/css3-images/\#radial-gradients][http_dev.w3.org_csswg_css3-images_radial-gradients]。

**重复渐变**

重复线性渐变
    background: repeating-linear-gradient(90deg, #ffffff 0px, hsla(0, 1%, 50%,0.1) 5px);
    重复径向渐变
    background: repeating-radial-gradient(2px 2px, ellipse,
                 hsla(0,0%,100%,1) 2px, hsla(0,0%,95%,1) 10px,
                 hsla(0,0%,93%,1) 15px, hsla(0,0%,100%,1) 20px);

## 背景渐变图案 ##

一些聪明的家伙已经将这些背景渐变技巧收集起来整理成了背景渐变模式。我们来看一个例子：

body { background-color:white; background-image: radial-gradient(hsla(0, 0%, 87%, 0.31) 9px, transparent 10px), repeating-radial-gradient(hsla(0, 0%, 87%, 0.31) 0, hsla(0, 0%, 87%, 0.31) 4px, transparent 5px, transparent 20px, hsla(0, 0%, 87%, 0.31) 21px, hsla(0, 0%, 87%, 0.31) 25px, transparent 26px, transparent 50px); background-size: 30px 30px, 90px 90px; background-position: 0 0; }

看起来不错吧?仅用几行代码，我们就用刚才学习的背景渐变技巧做出了一个可修改的、灵活的背景图案。  
CSS 高手 Lea Verou 收集了一系列 CSS3 背景渐变图案，具体请见 [http://lea.verou.me/css3patterns/][http_lea.verou.me_css3patterns]。

## 多重背景图片 ##

CSS3 允许为一个元素设定多重背景(多重背景是 CSS3 背景和边框模块的一部分)。除了 IE 8 及更低版本外，其他浏览器均支持该特性。语法如下：

background: url('../img/1.png'), url('../img/2.png'), url('../img/3.png');

和多重阴影的排列顺序一样，排在最前面的图片在浏览器中显示时会覆盖在最上面。你还可以在声明中追加背景颜色，像下面这样：

background: url('../img/1.png'), url('../img/2.png'), url('../img/3.png') left bottom, black;

不支持多重背景规则的浏览器(如 IE 8 及更低版本)会直接忽略整条规则。所以你可以在 CSS 多重背景规则之前再添加一条普通背景规则来作为针对老版本浏览器的备用方案。

[http_dev.w3.org_csswg_css3-images_linear-gradients]: http://dev.w3.org/csswg/css3-images/#linear-gradients
[http_dev.w3.org_csswg_css3-images_radial-gradients]: http://dev.w3.org/csswg/css3-images/#radial-gradients
[http_lea.verou.me_css3patterns]: http://lea.verou.me/css3patterns/