【前端】CSS3常用样式详解

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

✨前言

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

🌿1. CSS3 新增选择器

在这里插入图片描述

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

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

在这里插入图片描述

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

此外，伪元素选择器如 ::before 和 ::after 也经常被用于对元素添加特定的装饰内容。

🌟1.2 CSS3 属性选择器

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

注意：属性选择器、类选择器和伪类选择器的权重相同，都是 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 状态伪类选择器

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

例如，可以使用 input:enabled 来选择所有可用的输入框，而 input:checked 则会选择所有选中的复选框或单选按钮。

🍁1.5 其他选择器

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

例如，使用 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 引入了滤镜效果，可以对元素应用如模糊、亮度调整、对比度调整等视觉效果，常用于图像处理。

例如：

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

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

总结

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