【前端】CSS3常用样式详解

---

博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: 前端

---

文章目录

---

---

✨前言

• 在现代网页设计中，CSS3 提供了丰富而强大的工具，使得网页布局、样式控制和用户交互变得更加灵活和高效。本指南将详细介绍 CSS3 中常用的样式，包括各种选择器、圆角样式、文本样式增强、动态尺寸计算、CSS 变量、渐变效果和滤镜效果等。通过掌握这些特性，您可以打造更具吸引力、响应迅速且兼具现代感的网页设计。本指南适合所有前端开发人员以及对网页设计感兴趣的读者，帮助您在实际项目中更好地应用 CSS3 的新特性。 Search results for: CSS3

---

🌿1. CSS3 新增选择器

在介绍 CSS3 新增选择器之前，我们先简单回顾一下 CSS2 中的一些基础选择器：

---

💡1.1 基础选择器与复合选择器

• 基础选择器：包括 标签选择器、类选择器、ID 选择器、以及 通配符选择器。
• 复合选择器：包括 后代选择器（也称包含选择器）、子选择器、并集选择器、交集选择器，还有 伪类选择器。

此外，伪元素选择器如

::before

和

::after

也经常被用于对元素添加特定的装饰内容。

---

🌟1.2 CSS3 属性选择器

CSS3 新增了一些属性选择器，让我们可以更便捷地根据元素特定的属性来选择目标元素，而不需要额外借助于类或 ID 来进行选择。
选择器描述

E[att]

选择具有

att

属性的元素

E

E[att="val"]

选择

att

属性值等于

val

的元素

E

E[att^="val"]

选择

att

属性值以

val

开头的元素

E

E[att$="val"]

选择

att

属性值以

val

结尾的元素

E

E[att*="val"]

选择

att

属性值中包含

val

的元素

E

注意：属性选择器、类选择器和伪类选择器的权重相同，都是 10。

---

🍃1.3 结构伪类选择器

CSS3 引入了 12 种结构伪类选择器，方便对父子结构元素进行灵活选择。这些选择器可以分为以下四类：

1. 通用子元素过滤器：如 E:nth-child(n) 和 E:nth-last-child(n)，用于按顺序或倒序过滤子元素。
2. 通用类型过滤器：如 E:nth-of-type(n) 和 E:nth-last-of-type(n)，用于过滤指定类型的子元素。
3. 特定位置元素选择器：如 E:first-child、E:last-child 以及 E:first-of-type、E:last-of-type，分别用于选择第一个或最后一个子元素。
4. 特定状态选择器：包括 :root、E:only-child、E:only-of-type 和 E:empty。

例如，

E:nth-child(2)

选择父元素下的第二个子元素，而

E:nth-of-type(2)

则会选择父元素中第二个类型为

E

的子元素。

区别：

• nth-child(n) 是基于父元素的所有子元素进行选择，而 nth-of-type(n) 则是基于父元素中特定类型的子元素。

---

🌷1.4 状态伪类选择器

状态伪类选择器主要用于选择特定状态下的元素，包括可用状态、不可用状态、选中状态等。
选择器描述

E:enabled

选择所有可用的元素

E

，如表单中的输入框

E:disabled

选择所有不可用的元素

E

，如禁用的按钮

E:checked

选择所有已选中的元素

E

，如选中的单选框或复选框
例如，可以使用

input:enabled

来选择所有可用的输入框，而

input:checked

则会选择所有选中的复选框或单选按钮。

---

🍁1.5 其他选择器

CSS3 还新增了一些通用兄弟选择器、相邻兄弟选择器、否定伪类选择器等，帮助我们在文档中进行更精细的选择。
选择器描述

E~F

选择所有位于元素

E

之后的兄弟元素

F

，且两者具有相同的父元素。

E+F

选择紧邻在元素

E

之后的兄弟元素

F

。

E:not(s)

选择所有符合

E

但不符合选择器

s

的元素，用于精确选择。

E:target

选择被相关 URL 指向的元素

E

，用于定位目标元素。
例如，使用

div p:not(.red)

可以选择

div

中不带有类名为

red

的所有

p

元素。

---

🌸2. CSS3 圆角样式

CSS3 引入了

border-radius

属性来设置元素的圆角，从而实现更平滑的视觉效果。

---

💎2.1 基本用法

• border-radius: 5px; 设置所有四个角的半径为 5 像素。
• border-top-left-radius: 50px 100px; 设置左上角为椭圆形，水平半径为 50 像素，垂直半径为 100 像素。
• border-radius: 50%; 设置为 50% 可将元素变成一个圆形或椭圆形（取决于元素的宽高）。

---

🌼2.2 示例代码

#box{width: 200px;height: 150px;border: 2px solid #8ac007;border-top-left-radius: 150px 75px;}

上述代码将左上角设置为椭圆形，其效果如下：

---

🌻3. CSS3 文本样式增强

---

💧3.1 文本对齐与装饰

CSS3 继续加强了对文本对齐和装饰的支持，使得网页的排版更加灵活：

• **text-align-last**：设置如何对齐最后一行文本。
• **text-overflow**：控制文本溢出时的行为，可设置为 clip 或 ellipsis 来实现剪裁或省略号显示。
• **text-shadow**：为文本添加阴影效果，例如：text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

---

🌟3.2 CSS3 颜色表示与透明度控制

CSS3 增强了对颜色的控制，包括引入了 RGBA 和 HSLA 颜色表示法：

• RGBA：在 RGB 基础上增加了透明度参数，例如 rgba(255, 0, 0, 0.5) 表示 50% 透明度的红色。
• HSLA：使用色调、饱和度、亮度和透明度来定义颜色，例如：background-color:hsla(120, 100%, 50%, 0.3);以上代码表示一种 30% 透明度的绿色。

---

🌺4. CSS3 calc() 函数

calc()

函数可以让你在声明 CSS 属性值时进行简单的数学运算，非常适合在设置动态尺寸时使用。

width:calc(100% - 80px);

上述代码表示当前元素的宽度等于其父元素宽度减去 80 像素，这样的设置在响应式设计中非常有用。

---

🌼5. CSS 变量（自定义属性）

CSS3 引入了 CSS 变量，也称为 自定义属性，用于统一管理样式，方便维护和复用。

---

🌷5.1 声明与使用

• 声明变量：变量名以两根连字符开头，例如：:root{--main-bg-color: #3498db;--padding-size: 20px;}
• 使用变量：使用 var() 函数来调用已定义的变量：body{background-color:var(--main-bg-color);padding:var(--padding-size);}``````var() 函数还支持设置默认值，例如：color:var(--text-color, #000);当 --text-color 未定义时，将使用默认值 #000。

---

🌿5.2 变量作用域

CSS 变量的作用域遵循 CSS 选择器的优先级，定义在全局（如

:root

）的变量可以被局部样式覆盖。例如：

:root{--font-size: 16px;}p{--font-size: 14px;font-size:var(--font-size);}

以上代码中，段落元素

p

的字体大小将被设置为 14 像素，而其他元素则使用全局的 16 像素。

---

🌸6. CSS3 渐变（Gradients）

CSS3 支持渐变效果，可以实现平滑的色彩过渡，主要包括 线性渐变 和 径向渐变。

🌼6.1 线性渐变

线性渐变允许我们在一个方向上平滑地过渡多种颜色。

• 从上到下的渐变（默认）：background-image:linear-gradient(red, yellow);
• 从左到右的渐变：background-image:linear-gradient(to right, red, yellow);
• 任意角度的渐变：background-image:linear-gradient(45deg, red, yellow);使用角度来定义渐变方向，0deg 表示从下到上，90deg 表示从左到右。

---

🌷6.2 径向渐变

径向渐变是以元素的中心为起点，向外扩散进行渐变。

• 基本径向渐变：background-image:radial-gradient(circle, red, yellow, green);
• 设置比例：background-image:radial-gradient(circle, red 10%, yellow 30%, green 60%);以上代码中，不同颜色在不同位置的比例呈现渐变效果。

---

🌻7. CSS3 滤镜效果（Filters）

CSS3 引入了滤镜效果，可以对元素应用如模糊、亮度调整、对比度调整等视觉效果，常用于图像处理。
滤镜描述

blur(px)

应用高斯模糊效果，参数为模糊程度的像素值。

brightness(%)

调整亮度，

0%

为全黑，

100%

为原始亮度。

contrast(%)

调整对比度，

0%

为全灰，

100%

为原始对比度。

grayscale(%)

将图像转换为灰度，

100%

为完全灰度化。

sepia(%)

应用深褐色效果，

100%

为完全褐色化。
例如：

img{filter:grayscale(50%)blur(5px);}

上述代码对图像应用了 50% 的灰度和 5 像素的模糊效果。

---

总结

• CSS3 提供了丰富的选择器、新增的样式属性以及强大的函数和变量功能，使得网页的设计和开发更加高效和灵活。通过学习和应用这些新特性，我们可以创建更加生动、动态和现代化的网页效果。希望本文能帮助您对 CSS3 的新特性有更全面的了解，鼓励您在实际项目中加以应用。

---

---