博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: 前端
✨前言在现代网页设计中，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 种结构伪类选择器，方便对父子结构元素进行灵活选择。这些选择器可以分为以下四类：
通用子元素过滤器：如 E:nth-child(n) 和 E:nth-last-child(n)，用于按顺序或倒序过滤子元素。通用类型过滤器：如 E:nth-of-type(n) 和 E:nth-last-of-type(n)，用于过滤指定类型的子元素。特定位置元素选择器：如 E:first-child、E:last-child 以及 E:first-of-type、E:last-of-type，分别用于选择第一个或最后一个子元素。特定状态选择器：包括 :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 示例代码
代码语言：javascript代码运行次数：0运行复制#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：为文本添加阴影效果，例如：
代码语言：javascript代码运行次数：0运行复制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：使用色调、饱和度、亮度和透明度来定义颜色，例如：
代码语言：javascript代码运行次数：0运行复制background-color: hsla(120, 100%, 50%, 0.3);以上代码表示一种 30% 透明度的绿色。
🌺4. CSS3 calc() 函数
calc() 函数可以让你在声明 CSS 属性值时进行简单的数学运算，非常适合在设置动态尺寸时使用。
代码语言：javascript代码运行次数：0运行复制width: calc(100% - 80px);上述代码表示当前元素的宽度等于其父元素宽度减去 80 像素，这样的设置在响应式设计中非常有用。
🌼5. CSS 变量（自定义属性）
CSS3 引入了 CSS 变量，也称为 自定义属性，用于统一管理样式，方便维护和复用。
🌷5.1 声明与使用
声明变量：变量名以两根连字符开头，例如：
代码语言：javascript代码运行次数：0运行复制:root {
--main-bg-color: #3498db;
--padding-size: 20px;
}使用变量：使用 var() 函数来调用已定义的变量：
代码语言：javascript代码运行次数：0运行复制body {
background-color: var(--main-bg-color);
padding: var(--padding-size);
}var() 函数还支持设置默认值，例如：
代码语言：javascript代码运行次数：0运行复制color: var(--text-color, #000);当 --text-color 未定义时，将使用默认值 #000。
🌿5.2 变量作用域
CSS 变量的作用域遵循 CSS 选择器的优先级，定义在全局（如 :root）的变量可以被局部样式覆盖。例如：
代码语言：javascript代码运行次数：0运行复制:root {
--font-size: 16px;
}
p {
--font-size: 14px;
font-size: var(--font-size);
}以上代码中，段落元素 p 的字体大小将被设置为 14 像素，而其他元素则使用全局的 16 像素。
🌸6. CSS3 渐变（Gradients）
CSS3 支持渐变效果，可以实现平滑的色彩过渡，主要包括 线性渐变 和 径向渐变。
🌼6.1 线性渐变
线性渐变允许我们在一个方向上平滑地过渡多种颜色。
从上到下的渐变（默认）：
代码语言：javascript代码运行次数：0运行复制background-image: linear-gradient(red, yellow);从左到右的渐变：
代码语言：javascript代码运行次数：0运行复制background-image: linear-gradient(to right, red, yellow);任意角度的渐变：
代码语言：javascript代码运行次数：0运行复制background-image: linear-gradient(45deg, red, yellow);使用角度来定义渐变方向，0deg 表示从下到上，90deg 表示从左到右。
🌷6.2 径向渐变径向渐变是以元素的中心为起点，向外扩散进行渐变。
基本径向渐变：
代码语言：javascript代码运行次数：0运行复制background-image: radial-gradient(circle, red, yellow, green);设置比例：
代码语言：javascript代码运行次数：0运行复制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% 为完全褐色化。
例如：
代码语言：javascript代码运行次数：0运行复制img {
filter: grayscale(50%) blur(5px);
}上述代码对图像应用了 50% 的灰度和 5 像素的模糊效果。
总结
CSS3 提供了丰富的选择器、新增的样式属性以及强大的函数和变量功能，使得网页的设计和开发更加高效和灵活。通过学习和应用这些新特性，我们可以创建更加生动、动态和现代化的网页效果。希望本文能帮助您对 CSS3 的新特性有更全面的了解，鼓励您在实际项目中加以应用。