CSS3 API，如何利用其强大功能提升网页设计？

CSS3 是层叠样式表语言的最新版本，它带来了许多新特性和 API，这些特性被分为多个模块，包括新的选择器、圆角、阴影、渐变、过渡、动画以及新的布局方式等，以下是对 CSS3 一些主要 API 的详细解释：

1、背景相关 API

background-image：用于添加背景图片，不同的背景图像可以用逗号隔开，第一个设置的永远显示在最顶端。

 body {
       background-image: url(images/hello2.jpeg), url(images/timg.jpeg);
       background-repeat: no-repeat, repeat;
       background-position: center top, center top;
     }

也可以将多个属性合并在一个background 属性中，如：

 body {
       background: url(images/hello2.jpeg) no-repeat center top, url(images/timg.jpeg) repeat center top;
     }

background-size：指定背景图像的大小，在 CSS3 之前，背景图像大小由图像的实际大小决定，现在可以指定背景图片的大小为父元素的宽度和高度的百分比，语法为background-size: cover|contain;，其中cover 会将背景图片按照原来的缩放比铺满整个容器，而contain 则会将背景图片按照原来的缩放比完整地显示在容器中。

 div {
       width: 400px;
       height: 400px;
       background: url(images/hello2.jpeg) no-repeat;
       background-size: 100% 100%;
     }

如果设置大的背景图并希望随着浏览器拉伸背景图等比例缩放，可以使用：

 body {
       background-image: url(images/hello.jpeg);
       background-size: cover;
     }

background-origin：指定背景图像的位置区域，可以是content-box、padding-box 或border-box 区域内放置背景图像。

 div {
       width: 400px;
       height: 400px;
       padding: 20px;
       border: 10px solid #ff0000;
       background: url(images/hello2.jpeg) no-repeat;
       background-size: 100% 100%;
       background-origin: content-box;
     }

background-clip：指定绘图区域的背景。

 div {
       width: 400px;
       height: 400px;
       padding: 20px;
       border: 10px solid #ff0000;
       background-clip: content-box;
       background-color: yellow;
     }

这样会发现只有内容区域有背景色。

2、边框相关 API

box-shadow：为元素添加阴影，语法为box-shadow: 水平阴影的位置 垂直阴影的位置 模糊程度 阴影大小 颜色 内阴影|外阴影。

 .box {
       width: 200px;
       height: 200px;
       background-color: red;
       margin: 100px auto;
       box-shadow: 20px 30px 50px 20px #008B8B;
     }

border-radius：给元素添加圆角的边框，可以分别为左上角、右上角、右下角、左下角设置不同的半径值，如border-radius: 10px 20px 30px 40px;。

border-image：用于设置边框图片，相关属性包括：

border-image-source：用于指定要用于绘制边框的图像的位置。

border-image-slice：图像边界向内偏移。

border-image-repeat：设置图像的重复方式，可以是repeat（重复）或round（铺满）。

 border-image-source: url(images/border-img.jpeg);
       border-image-slice: 20;
       border-image-repeat: round;

3、文本效果相关 API

text-shadow：为文本添加阴影，语法为text-shadow: h-shadow v-shadow blur(可选) color(可选);。

 h1 {
       text-shadow: 2px 2px #ff0000;
     }

text-overflow：用于显示溢出内容，语法为text-overflow: clip(修剪文本)|ellipsis(超出显示省略符号)，要实现文本不换行，超出部分隐藏并显示省略号的效果，可以先让文本不换行，然后超出部分隐藏掉，最后再设置省略号：

 p {
       width: 100px;
       height: 40px;
       line-height: 40px;
       border: 1px solid red;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
     }

4、选择器相关 API

属性选择器：可以选中所有带有特定属性的元素设置样式，选中所有带有class 属性的元素设置样式：

 [class] {
       color: red;
     }

还可以选中具有特定属性值的元素，如选中class="active" 的所有元素设置样式：

 [class=active] {
       border: 1px solid #000;
     }

对于input 元素，可以通过属性选择器方便地选中，

 input[type='submit'] {
       /* 样式设置 */
     }

伪类和伪元素选择器：伪类选择器包括a:link（未访问过）、a:visited（访问过后）、a:hover（鼠标悬停）、a:active（鼠标摁住）等，伪元素选择器包括::after 和::before 等，

 ::after {
       content: 'hello world';
     }

相关问答FAQs

1、问题：如何使用 CSS3 实现一个按钮在鼠标悬停时改变背景颜色和文字颜色？

解答：可以通过伪类选择器:hover 来实现。

 .button {
       background-color: blue;
       color: white;
       padding: 10px 20px;
       border: none;
       cursor: pointer;
     }
     .button:hover {
       background-color: red;
       color: yellow;
     }

2、问题：如何让一个元素的背景图片在容器大小改变时保持等比例缩放？

解答：可以使用background-size: cover; 来实现。

 .container {
       width: 300px;
       height: 300px;
       background-image: url('example.jpg');
       background-size: cover;
     }

这样，无论容器的大小如何改变，背景图片都会始终按照原始比例缩放以填满容器。