【CSS】5 个简化网页样式的 CSS3 功能

今天药忘吃喽~ 2023-10-12 22:19 34阅读 0赞

> **本文仅供学习参考！**

### 介绍 ###

如果您是专业的Web开发人员，则可能会使用CSS来设置网页样式。最新版本的CSS版本3为CSS2功能集添加了许多功能，使其对任何Web开发人员都具有吸引力。本文讨论了 CSS3 的五个功能，您会发现它们很有趣。本文中讨论的功能包括 – 新的选择器、边框图像、渐变、设置不透明度和多列布局。

**注意：**  
CSS3 功能（如 Web 字体、转换和过渡）经常被讨论。因此，本文讨论了其他一些值得注意的功能。当然，您应该始终检查目标浏览器版本及其对这些功能的支持。

### 1. 新选择器 ###

CSS 选择器允许您匹配元素以便对它们应用样式。CSS3 向现有的选择器集添加了多个选择器。这些选择器大致可分为两种类型：

*  属性子字符串选择器
 *  基于伪类的选择器

属性子字符串选择器允许您匹配属性以指定字符串开头、结尾或包含指定字符串的元素。请考虑以下示例：

a[href ^= "http://"]
    {
        
      ...
    }
    
    a[href $= ".zip"]
    {
        
      ...
    }
    
    a[href *= "download"]
    {
        
      ...
    }

第一个 CSS 规则选择 href 属性以 http:// 开头的所有锚元素。请注意使用 ^=（属性以选择器开头）来查找以特定字符串开头的属性值。第二个 CSS 规则选择 href 属性以 .zip 结尾的所有锚元素。最后，第三个 CSS 规则选择其 href 属性包含字符串下载属性值中任意位置的所有锚元素。

基于伪类的选择器允许您根据元素在 DOM 树中的结构位置来匹配元素。考虑一个具有特定行和列的表。您可能希望将样式规则应用于表格最后一行或表格特定列中的所有单元格。在这种情况下，伪类如：first-child，：last-child和第nth-child会派上用场（还有更多）。以下示例显示了如何使用它们：

tr:last-child
    {
        
     ...
    }
    
    tr:nth-child(odd)
    {
        
     ...
    }

第一个选择器使用 ：last-child 伪类并匹配作为其父级最后一个子元素的 `<tr>` 元素。然后，CSS 规则将应用于这些`<tr>` 元素。类似地，第二个选择器使用 ：nth-child（） 伪类并选择表中奇数行的所有`<tr>` 元素。而不是内置常量奇数，甚至你也可以指定一个元素的数字索引。

### 2. 边框图像 ###

通常，DOM 元素的边框以实心和虚线等样式呈现。CSS3 还允许您使用用于呈现边框的图像。这可以使边界非常花哨和吸引人。请考虑下图，该图显示了一个

元素，其中包含用于呈现边框的图像。

![边框图像][2198ad666f365eb288ca0c5d785d8ac4.png]  
边框图像

此边框图像背后的 CSS 规则如下所示：

#mydivwithborder
    {
        
        text-align:center;
        height:100px;
        width:100px;
        border:30px solid transparent;
        border-image:url('images/divborder.png') 30 30 round;
    }

边框图像属性指定边框图像的 URL，后跟图像切片信息。圆形的设置表示边框图像的中间部分对整数个图块重复。此设置的其他可能性是重复和拉伸。上面指定的边框属性将宽度指定为 30px。因此，边框图像将缩放到该宽度。

### 3. 渐变 ###

通常，元素的背景以纯色呈现。CSS3 允许您使用渐变填充而无需任何图像。使用渐变，您可以应用从一种颜色到另一种颜色的平滑过渡。梯度可以是线性的，也可以是径向的。请考虑下图，该图显示了具有线性背景的

元素。

![背景渐变][0262c296514199d39f61f68b257b1d01.png]  
背景渐变

此线性渐变背后的 CSS 规则如下：

#mydivwithgradient
    {
        
        text-align:center;
        height:100px;
        width:100px;
        background:linear-gradient(to left, blue , green);
    }

请注意如何从右到左指定线性渐变，起始颜色为蓝色，结束颜色为绿色。其他类型的梯度可以使用径向梯度（），重复线性梯度（）和重复径向梯度（）来渲染。

### 4. 不透明度 ###

在 CSS2 中，你可以使用 rgb（） 来设置颜色。CSS3 还提供了 rgba（），除了红色、绿色和蓝色值之外，它还允许您指定一个 alpha 值。alpha 值控制元素的不透明度。它可以是 0 到 1 之间的任何值，0 表示完全透明，1 表示完全不透明。考虑下图，该图显示了 rgba（） 的实际运行情况：

![背景不透明度][0574f67fcd4d856cf61ecb89931be2d8.png]  
背景不透明度

第一个

是完全不透明的，并使用 rgb（） 来设置其背景颜色。第二个

是半透明的，并使用rgba（）来设置其背景颜色。以下 CSS 规则显示了如何使用 rgba（）：

#mydivwithrgba
    {
        
        text-align:center;
        height:100px;
        width:100px;
        background-color:rgba(100,130,35,0.5);
    }

请注意 rgba（） 除了指定红色、绿色和蓝色值之外的 alpha 值 0.5。

### 5. 多列布局 ###

在列中显示文本是一项繁琐的任务。这是因为 CSS2 没有提供将内容拆分为列的简单方法。过去，开发人员需要计算进入相应列的文本，然后使用该文本填充列。这通常需要一些服务器端或客户端脚本。幸运的是，CSS3 通过列计数属性提供了一个简单的解决方案。请考虑下图：

![列计数][28a30522a1818eeafa94d1f5df998935.png]  
列计数

如您所见，整个文本分为三列。使这项工作的 CSS 规则如下所示：

#mydivwithcolumns
    {
        
        width: 500px;
        margin: 0 auto;
        text-align:center;
        column-count:3;
        -moz-column-count:3;
        -webkit-column-count:3;
    }

属性设置为 3。您可能需要对列计数属性使用特定于浏览器的前缀，以使其适用于所有浏览器。

### 总结 ###

CSS3 添加了许多新功能，使 Web 开发人员和设计人员更容易设置样式。本文研究了其中的一些功能。具体来说，您了解了新的选择器、边框图像、渐变、不透明度和多列布局。

[2198ad666f365eb288ca0c5d785d8ac4.png]: https://img-blog.csdnimg.cn/img_convert/2198ad666f365eb288ca0c5d785d8ac4.png
[0262c296514199d39f61f68b257b1d01.png]: https://img-blog.csdnimg.cn/img_convert/0262c296514199d39f61f68b257b1d01.png
[0574f67fcd4d856cf61ecb89931be2d8.png]: https://img-blog.csdnimg.cn/img_convert/0574f67fcd4d856cf61ecb89931be2d8.png
[28a30522a1818eeafa94d1f5df998935.png]: https://img-blog.csdnimg.cn/img_convert/28a30522a1818eeafa94d1f5df998935.png