【QT/C++】Qt样式设置之CSS知识（系统性概括）
【QT/C++】Qt样式设置之CSS知识（系统性概括）
(关注不迷路哈！！！)
文章目录
- 【QT/C++】Qt样式设置之CSS知识（系统性概括）
- 前言
- 一、CSS基础：语法与核心概念
- 1.1 语法结构
- 1.2 四种引入方式
- 1.3 三大特性
- 层叠性
- 继承性
- 优先级
- 1.4 字体样式属性
- 1.5 文本属性
- 二、CSS元素显示模式
- 三大核心显示模式
- 显示模式转换
- 三、CSS选择器
- 基础选择器
- 复合选择器
- 伪类选择器
- 四、CSS背景样式
- 五、CSS盒子模型
- 六、CSS美化三剑客
- 圆角边框
- 盒子阴影
- 文字阴影
- 七、CSS布局
- 定位布局
- Flex布局
- Grid布局
- 八、CSS动画与过渡
- 过渡（Transition）
- 动画（Animation）
- 九、CSS响应式设计
- 媒体查询
- 视口设置
- 十、CSS高级特性
- CSS变量（Radial Gradient）
- 渐变（Repeating Gradient）
- 阴影（Box Shadow & Text Shadow）
- 总结
前言
CSS（层叠样式表）是网页设计的核心技术之一，用于控制网页的外观和布局。本文将全面介绍CSS的基础知识、核心概念以及高级特性，帮助读者掌握CSS的精髓。
一、CSS基础：语法与核心概念
1.1 语法结构
CSS最小功能单位是规则集，由「选择器」「声明块」「属性」「值」组成，语法需严格遵循规范：
/* 规则集 = 选择器 + 声明块 */
选择器 {属性1: 值1; /* 声明：冒号分隔属性与值，分号结尾（不可省略） */属性2: 值2; /* 多声明换行书写，提升可读性 */
}/* 实战示例：段落基础样式 */
p {font-size: 16px; /* 非0值必须带单位（px/em/rem） */color: #333; /* 十六进制颜色（缩写，等价#333333） */line-height: 1.5; /* 无单位：当前字体大小的1.5倍 */margin: 0; /* 0可省略单位 */font-family: "Microsoft YaHei", Arial, sans-serif; /* 字体族：优先使用前者 */
}
关键语法规则
- 注释：仅支持
/* 内容 */（单行/多行），// 单行注释无效（会导致后续样式失效）。 - 大小写：属性/选择器不区分大小写（Color=,color），但值中路径（url(Image.jpg)）、字体名（“Microsoft YaHei”）区分大小写。
- 空格规范：选择器与
{之间必须加空格（p{不规范），冒号与值之间建议加空格（font-size:16px→font-size: 16px）。
1.2 四种引入方式
| 引入方式 | 语法示例 | 优先级 | 加载机制 | 适用场景 |
|---|---|---|---|---|
| 内联样式 | <div style="color: red;">内容</div> | 最高 | 随元素加载 | 动态元素、临时样式调整 |
| 内部样式 | <style>.box { width: 200px; }</style> | 中 | 随HTML头部加载 | 单页面网站、临时测试 |
| 外部样式 | <link rel="stylesheet" href="style.css"> | 中 | 并行加载 | 多页面网站、大型项目 |
| @import引入 | <style>@import url("reset.css");</style> | 最低 | 串行加载 | 样式模块化拆分 |
1.3 三大特性
CSS（层叠样式表）之所以能灵活控制网页样式，核心在于它的三大特性：层叠性、继承性和优先级。
这些特性决定了样式如何应用、冲突如何解决以及元素如何继承样式规则。
层叠性
当多个样式规则应用于同一元素时，CSS会根据"就近原则"决定使用哪个样式。
span {color: red; /* 距离远，被覆盖 */font-size: 42px; /* 不冲突，正常生效 */
}span {color: pink; /* 距离近，生效 */
}
继承性
子元素会自动继承父元素的某些样式属性，如字体、颜色等。
- 文本相关：
text-开头的属性（如text-align、text-indent） - 字体相关：
font-开头的属性（如font-size、font-family） - 行高相关：
line-height - 颜色相关：
color
h3 {/* 父元素设置 */color: green;font: 32px/1.5 "Microsoft YaHei"; /* 字体大小32px，行高1.5 */
}div {/* 子元素继承了h3的行高设置 */font-size: 20px; /* 行高自动计算为 20px * 1.5 = 30px */
}
优先级
CSS优先级由权重决定，从高到低为：
- !important（无穷大）
- 行内样式（1,0,0,0）
- ID选择器（0,1,0,0）
- 类选择器、伪类选择器（0,0,1,0）
- 元素选择器（0,0,0,1）
综合案例：理解三大特性的协同工作
/* 1. 继承性：设置基础样式，被所有子元素继承 */
body {font-family: "Microsoft YaHei";line-height: 1.5;
}/* 2. 优先级：类选择器定义导航容器样式 */
.nav {color: #333;
}/* 3. 复合选择器权重叠加：.nav li (0,0,1,1) */
.nav li {color: #666;
}/* 4. 更高权重：.nav .active (0,0,2,0) */
.nav .active {color: #ff6700;
}/* 5. 层叠性：hover状态样式覆盖默认样式 */
.nav li:hover {color: #f00; /* 鼠标悬停时生效 */
}
1.4 字体样式属性
/* 设置字体 */
font-family: "Microsoft YaHei", Arial, sans-serif;/* 设置字体大小 */
font-size: 16px;/* 设置字体粗细 */
font-weight: bold; /* 或数字 700 *//* 设置字体样式 */
font-style: italic;/* 复合属性 */
font: italic 700 36px "Microsoft YaHei";
1.5 文本属性
/* 文本颜色 */
color: #333;/* 文本对齐 */
text-align: center;/* 文本装饰 */
text-decoration: underline;/* 文本缩进 */
text-indent: 2em;/* 行高 */
line-height: 1.5;
二、CSS元素显示模式
元素显示模式指的是HTML元素在页面中默认的表现形态，它决定了元素的排列方式、尺寸计算规则和嵌套关系。
简单来说，就是元素"如何展示自己"以及"如何与其他元素相处"。
三大核心显示模式
- 块级元素：独占一行，可设置宽高
- 行内元素：与其他元素并排，不可设置宽高
- 行内块元素：并排显示且可设置宽高
显示模式转换
/* 转为块级元素 */
display: block;/* 转为行内元素 */
display: inline;/* 转为行内块元素 */
display: inline-block;
综合代码演示
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>元素显示模式</title><!-- ------ 元素显示模式 ------ --><!-- 1.作用：网页标签非常多，在不同地方会用到不同的标签，了解他们的特点可以更好的布局我们的网页2.元素显示模式就是 元素(标签) 以什么方式进行显示，比如<div>自己独占一行，而<span>一行可以放多个3.HTML元素一般分为 块元素 和 行内元素 两种类型--><style>/* 111.块元素 常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>，其中<div>标签是最典型的块元素11.块元素特点：1.独占一行2.高度、宽度、外边距和内边距都可以控制3.宽度默认是容器(父级宽度)的100%4.是一个容器和盒子，里面可以放行内或块级元素22.注意：1.文字类元素不能使用块元素2.<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>3.同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素例如： <p><div>这里有问题</div> (使用浏览器的审查器即可发现问题)</p>*/.change {/* width: 200px; */height: 200px;background-color: aqua;}/* 222.行内元素 常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>其中<span>是最典型的行内元素（内联元素）11.行内元素的特点：1.相邻行内元素在一行上，即一行可以显示多个2.高、宽直接设置是无效的3.默认宽度就是它本身内容的宽度4.行内元素只能容纳文本后者其他行内元素22.注意：1.链接里面不能再放链接2.特殊情况链接<a>里面可以放块级元素，但给<a>转换一下块级模式最安全*/.span1 {/* 这里设置宽度和高度是无效的，但是设置其他的是可以的，比如下面设置背景颜色 */width: 100px;height: 100px;background-color: hotpink;}/* 333.行内块元素 在行内元素中有几个特殊的标签 <img>、<input>、<td>，他们同时具有块元素和行内元素的特点（行内块元素）*//* 11.行内块元素的特点1.和相邻行内元素（行内块）在一行上，但是他们之间会有空白间隙，一行可以显示多个（行内元素的特定）2.默认宽度就是它本身内容的宽度（行内元素的特点）3.高度、行高、外边距和内边距都可以控制（块级元素的特点）*/input {width: 249px;height: 50px;}/* --- 元素显示模式的转换 --- (特殊情况下，我们需要元素模式的转换 简单理解：一个模式的元素需要另一种模式的特性)*//* 1. 转换为块元素：display:block2. 转换为行内元素：display:inline;3. 转换为行内块元素：display:inline-block;*//* 这里想要增加链接<a>的触发范围 */.a1 {width: 150px;height: 50px;/* 1.把行内元素<a>转换为块级元素 这样width和height的修改才能生效 */display: block;background-color: pink;}.change2 {/* 2.把块级元素转换为行内元素，实现一行放多个块级元素 */display: inline;}.change3 {/* 把行内元素转换为行内块元素 */width: 300px;height: 30px;background-color: skyblue;/* 转换前，对于行内元素来说，宽度和高度的设置是无效的 */display: inline-block;}/* 简洁版小米侧边栏案例 */.a-change {/* 设置字体颜色 */color: white;width: 230px;height: 40px;background-color: #535758;/* 把行内元素转换为块元素 */display: block;/* 取消链接下划线 */text-decoration: none;font-size: 14px;/* 空两个格子 */text-indent: 2em;/* ! 实现单行文字垂直居中 ! --> 解决方案：让文字的行高等于盒子的高度*//* 原理：行高由上空隙、文本本省的高度、下空隙组成 简单理解：行高的上空隙和下空隙把文字挤到中间了，所以如果行高小于盒子高度，文字就会偏上；吐过行高大于盒子高度，则文字会偏下*/line-height: 40px;}a:hover {background-color: #ff6700;}del{display:block;height:200px;background-color: red;}</style>
</head><body><!-- 块元素测验 --><div class="change">比较霸道，自己独占一行</div><!-- 不能这么用！！用浏览器检查会发现有问题 --><p><div class="change">这里有问题</div></p><!-- 行内元素测验 --><span class="span1">pink老师你怎么穿着品如的衣服呢</span> <strong>品如的衣服</strong><span class="span1">pink老师</span> <strong>品如的衣服</strong><!-- 行内块元素测验 --><input type="text" /><input type="text" /><!-- 元素模式的转换测验 --><!-- 这里想要增加链接<a>的触发范围 --><a href="picture/img1.jpg" class="a1">夏至未至</a><a href="picture/img1.jpg" class="a1">夏至未至</a><!-- 使块级元素在一行显示多个 --><div class="change2">我是块级元素，将要通过元素转换模式(改为行内元素)</div><div class="change2">我是块级元素 </div><!-- 想行内元素的宽度和高度 --><span class="change3">把行内元素转换为行内块元素</span><span class="change3">把行内元素转换为行内块元素</span><br /><!-- 简洁版小米侧边栏案例 主要思路1.链接<a>要实现竖着显示(行内元素转换为块级元素，这样链接就可以独占一行并且有高度和宽度)2.链接有背景颜色，鼠标经过<a>时链接变色--><a href="https://re.jd.com/search?keyword=%E7%94%B5%E8%AF%9D%E5%8D%A1&enc=utf-8" target="_blank" class="a-change">手机电话卡</a><a href="picture/img1.jpg" class="a-change">电视 盒子</a><a href="#" class="a-change" target="_blank">笔记本呢 平板</a><a href="#" class="a-change">出行 穿戴</a><a href="#" class="a-change">智能 路由器</a><a href="#" class="a-change">健康儿童</a><a href="#" class="a-change">耳机 音响</a><del>你好啊</del></body></html>
三、CSS选择器
基础选择器
/* 元素选择器 */
p { color: red; }/* 类选择器 */
.box { width: 100px; }/* ID选择器 */
#header { height: 80px; }/* 通配符选择器 */
* { margin: 0; padding: 0; }
复合选择器
/* 后代选择器 */
.nav li { color: blue; }/* 子选择器 */
.nav > a { color: red; }/* 并集选择器 */
h1, h2, h3 { font-weight: bold; }
伪类选择器
/* 状态伪类 */
a:hover { color: blue; }
input:focus { border-color: red; }/* 结构伪类 */
li:first-child { font-weight: bold; }
li:nth-child(2n) { background: #f0f0f0; }
四、CSS背景样式
/* 背景颜色 */
background-color: #fff;/* 背景图片 */
background-image: url(image.jpg);/* 背景平铺 */
background-repeat: no-repeat;/* 背景位置 */
background-position: center center;/* 背景固定 */
background-attachment: fixed;/* 复合写法 */
background: #fff url(image.jpg) no-repeat center fixed;/* 半透明背景 */
background-color: rgba(255, 0, 0, 0.5);
五、CSS盒子模型
在网页布局的世界里，CSS盒子模型是一切布局的基础。
无论是简单的文本段落还是复杂的页面组件，都可以被看作是一个个矩形的"盒子"。
掌握盒子模型的工作原理，是成为前端开发者的必备技能。本文将从基础概念出发，通过实例代码详细解析盒子模型的核心要素及实战技巧。
CSS盒子模型由四部分组成：
- 内容区（content）
- 内边距（padding）
- 边框（border）
- 外边距（margin）
/* 边框 */
border: 1px solid #ccc;/* 内边距 */
padding: 10px;/* 外边距 */
margin: 20px auto;/* 水平居中 */
.box {width: 300px;margin: 0 auto;
}
综合代码演示
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型</title><!-- 页面布局三大核心：盒子模型、浮动、定位 --><!-- 谓盒子模型：就是把HTML页面中的布局元素看做是一个矩形的盒子，也就是一个盛装内容的容器CSS盒子模型本质上是一个盒子，封装周围的HTML元素,包括：边框、外边距、内边距和实际内容--><style>/* 注意，这句话应为我们使用CSS时的第一句话* {padding: 0; 清除内边距 margin: 0; 清除外边距} *//* <!-- 111.border --><!-- border可以设置元素的边框，边框由三部分组成：边框宽度(粗细)、边框样式、边框颜色border: border-width | border-style | border-color; 边框属性简写(复合写法)：border-width border-style border-color;(没有顺序要求)--> */#div1 {width: 300px;height: 200px;/* 1.border-width 边框的粗细，一般情况下都用 px */border-width: 10px;/* 2.border-style 边框的样式 solid(实现边框) dashed(虚线边框) dotted(点线边框) */border-style: solid;/* 3.border-color */border-color: pink;/* 4.边框的简写 *//* border: 10px solid pink; */}/* 5.边框分开写法： border-top/left/right/bottom: 5px solid red *//* 注意：11.边框会额外增加盒子的实际大小,比如 width:100px的盒子,若有border: 5px solid red ，则盒子的实际宽度为100+2*5解决方案：1. 测量盒子的时候不要量边框2. 如果测量的时候包含了边框,则需要width/height减去边框宽度*2(若两边都有边框)*/#div2 {width: 200px;height: 200px;/* 给定一个200*200的盒子,设置上边框为红色,其余边为蓝色 *//* border-top: 5px solid red;border-bottom: 5px solid blue;border-left: 5px solid blue;border-right: 5px solid blue; *//* 这种写法更好，合理运用层叠性(就近原则) */border: 5px solid blue;border-top: 5px solid red;}/* 6.表格细线边框 (边框与边框之间会有像素融合问题,5px+5px=10px)*//* 解决：border-collapse: collapse(合并) 相邻边框合并在一起*/table {width: 500px;height: 250px;text-align: center;}table,td,th {border: 1px solid pink;/* 合并相邻的边框 */border-collapse: collapse;}/* 7.内边距 padding 盒子里面的内容默认适合盒子的边缘紧挨着的，这时就需要padding来进行调节11.padding 属性用于设置内边距，即边框和内容之间的距离1.padding-left 左内边距2.padding-right 右内边距3.padding-top 上内边距4.padding-bottom 下内边距22.padding复合写法(简写)1.padding: 5px; 1个值，代表上下左右都有5像素内边距2.padding: 5px 10px; 2个值，代表上下内边是5像素，左右内边距是10像素3.padding: 5px 10px 20px; 3个值，代表上内边距是5像素，左右内边距是10像素，下内边距是20像素4.padding: 5px 10px 20px 30px; 4个值，上是5像素，右10像素，下20像素，左30像素 顺时针(上右下左)33.padding会影响盒子的实际大小，也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子解决方案：如果要保证盒子跟效果图大小一致，则让width/height减去多出来的内边距大小即可(注意两边的内边距都要考虑进去)*/.div3 {width: 200px;height: 200px;background-color: pink;/* 在浏览器右键点击检查，把鼠标移动到对应的位置，内边距部分会变为跟背景不一样的颜色 *//* padding-left: 5px;padding-top: 5px;padding-right: 5px;padding-bottom: 5px; *//* 内边距简写 *//* padding: 5px; *//* padding: 5px 10px; *//* padding: 5px 10px 20px; */padding: 5px 10px 20px 30px;}/* 7.1 内边距的应用：当网页中每个导航栏(盒子)里面的字数不一样多时，我们就不要统一给每一个盒子设定宽度了直接用padding撑开盒子，就可以实现即使内容长度不一样，内容与盒子之间的边距也一样*/#nav {height: 41px;border-top: 3px solid #ff8500;border-bottom: 1px solid #edeef0;background-color: #fcfcfc;/* 运用了继承 a继承来自div的行高 */line-height: 41px;}#nav a {/* height: 41px; 由于a属于行内元素，这样设置无效，此时必须要转换 行内元素->行内块元素(不能装换成块级元素，因为其无法一行显示多个) */display: inline-block;height: 41px;padding: 0 20px;font-size: 15px;color: #4c4c4c;text-decoration: none;}/* 伪类选择器 */#nav a:hover {background-color: #eee;color: #ff8500;}/* 7.2 padding不会影响盒子大小的情况如果盒子本身没有指定width/height属性，则此时padding就不会撑开盒子大小(对应没有设置的属性)总结：孩子有边框，孩子变大了，但是父亲不受影响，也就是父盒子里面的子盒子会受内边框影响，但是父盒子不会发生变化*/.div5 {width: 300px;height: 100px;background-color: pink;}.div5 p {/* p的width不会变成300+30*2=360px，在自身width没有指定的情况下，不会超出父亲的范围 *//* width: 100%; */padding:30px;}/* 8. 外边距(margin) 控制盒子和盒子之间的距离属性： 1.margin-left 左外边距2.margin-right 右外边距3.margin-top 上外边距4.margin-bottom 下外边距注意：margin简写方式代表的意义和padding完全一致*/.div6 {height: 200px;width: 100px;background-color: pink;}/* #one {margin-bottom: 20px;} */#two {margin-top: 20px;margin-left: 20px;margin-bottom: 50px;}/* 8.1 外边距的典型应用外边距可以让块级盒子水平居中(盒子默认左侧对齐)，但是必须满足两个条件：1.盒子必须指定了宽度(width),否则它就跟浏览器/父盒子一样宽了2.盒子左右的外边距都设置为 auto以下三种写法都可以：1.margin-left: auto; margin-right: auto;2.margin: auto; (上下左右都auto了)3.(常用)margin: 0px auto; (上下外边距为0px 左右auto)注意：以上方法是让块级元素居中，行内元素或者行内块元素水平居中给其 父元素 添加 text-align: center; 即可*/.header {width: 500px;height: 200px;background-color: skyblue;/* 简写法：上下外边距为100px，左右外边距auto实现块级元素自动水平居中 */margin: 100px auto;/* text-align: center 使行内元素和行内块元素(img)都会居中对齐 */text-align: center;}#span1 {margin: 0 auto;/* margin: 0 auto; 不起效果，其只对块级元素起作用给其父元素添加 text-align: center才对*/}/* 8.2 使用margin定义块元素的垂直外边距时，可能会出现外边距的合并嵌套块元素垂直外边距的塌陷(父盒子跟者子盒子一起塌下来了)：对于两个嵌套关系(父子关系)的块级元素，父元素有上边距同时子元素也有上边距，此时父元素会塌陷较大的外边距值解决方案：1.可以为父元素定义上边框2.可以为父元素定义上内边框3.可以为父元素添加 overflow: hidden */#father {width: 400px;height: 400px;background-color: purple;margin-top: 50px;/* 父元素塌陷解决 *//* 1. transparent(透明)*//* border: 1px solid transparent; *//* 2. *//* padding: 1px; *//* 3. 最好，不会改变盒子的大小，上面两种都有影响*/overflow: hidden;/* 4.还有其他方法，比如 浮动、固定、绝对定位 这些的盒子不会有塌陷问题 */}#son {width: 200px;height: 200px;background-color: pink;/* 本来子元素按照margin-top:100px 应该从父元素的上顶部分开，但实际并没有，而是父元素跟者子元素一起下来了(塌陷) */margin-top: 100px;}/* 9. 内外边距的清除 *//* 网页很多元素都会自带默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，要先清除网页元素的内外边距 *{padding: 0; 清除内边距margin: 0; 清除外边距}！注意： 行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距(即使设置也不起效果)。但是转换为块级元素和行内元素就可以*//* ！ 这句话也是我们CSS的第一行代码 ！*/* {padding: 0;margin: 0;}#span2 {background-color: pink;margin: 20px;}</style>
</head><body><!-- 测试边框各属性 --><div id="div1"></div><br /><!-- 测试边框分开写法 --><div id="div2"></div><!-- 测试表格细线边框 --><table align="center" border="1" cellpadding="0" cellspacing="0"><thead> <!--注意不要把<thead>和<th>搞混 前一个是表结构标签，使表格层次看着更清晰，而后者是类似加粗版的<td>--><tr><th>排名</th><th>关键词</th><th>趋势</th><th>进入搜索</th><th>最近七日</th><th>相关链接</th></tr></thead><tbody><tr><td>1</td><td>鬼吹灯</td><td><img src="picture/down.jpeg" /></td><td>345</td><td>123</td><td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr><tr><td>2</td><td>盗墓笔记</td><td><img src="picture/down.jpeg" /></td><td>124</td><td>123421</td><td><a href="#" target="_blank">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr><tr><td>3</td><td>西游记</td><td><img src="picture/up.jpeg" /></td><td>212</td><td>3213</td><td><a href="#" target="_blank">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr><tr><td>4</td><td>甄嬛传</td><td><img src="picture/up.jpeg" /></td><td>2343</td><td>243343</td><td><a href="#" target="_blank">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr></tbody></table><!-- 盒子模型内边距测试 --><div class="div3">这是盒子模型的内边距测试 天王盖地虎，宝塔镇河妖妖怪阿斯蒂芬哈喽</div><!-- 内边距的应用 --><div id="nav"><a href="">新浪微博</a><a href="">手机新浪网</a><a href="">移动客户端</a><a href="">微博</a><a href="">交友网</a></div><!-- 测试padding不会影响盒子大小的情况 --><div class="div5"><p></p></div>换行<br><!-- 测试盒子模型之外边距 --><div class="div6" id="one"></div><div class="div6" id="two"></div><!-- 外边距的应用 --><div class="header"><span id="span1">里面的文字，为行内元素</span><img src="picture/up.jpeg" /></div><br><!-- 外边距的合并 --><div id="father"><div id="son"></div></div><br /><!-- 内外边距的清除 --><!-- 网页很多元素都会自带默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，要先清除网页元素的内外边距-->12345<ul><li>你好</li></ul><span id="span2">行内元素尽量只设置左右的内外边距</span>
</body></html>
六、CSS美化三剑客
在网页设计中，细节决定品质。圆角边框、盒子阴影和文字阴影这三个CSS属性，虽然看似简单，却能瞬间提升页面的精致度和立体感。
圆角边框
/* 圆角 */
border-radius: 10px;/* 圆形 */
.circle {width: 100px;height: 100px;border-radius: 50%;
}
盒子阴影
/* 外阴影 */
box-shadow: 0 2px 8px rgba(0,0,0,0.1);/* 内阴影 */
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
文字阴影
/* 文字阴影 */
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
综合代码演示
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>圆角边框+盒子阴影+文字阴影</title><style>/* 111.圆角边框 *//* border-radius: length; 设置元素的外边框圆角 radius(圆的半径)，圆与边框的交集形成的圆角效果 参数值可以为 数值 或 百分比 的形式1.如果盒子是个正方形，想要设置为一个圆，把数值修改为高度或宽度的一半即可，或者直接写为50%2.如果盒子是个矩形，设置为高度的一半就可以3.该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角4.每个角分开写：border-top-left-radius、border-top-right-radius(top必须在前面)、border-bottom-right-radius、border-bottom-lef-radius(bottom也要在前面)*//* 圆形 radiu设置为盒子宽度的一半即可*/.yuanxing {width: 300px;height: 300px;background-color: pink;/* border-radius: 150px; *//* 50% 就是宽度和高度的一半 */border-radius: 50%;}/* 圆角矩形 radius设置为盒子高度的一半*/.juxing {width: 300px;height: 100px;background-color: pink;border-radius: 50px;}/* 每个角设置不同的radius */.radius1 {width: 200px;height: 200px;background-color: pink;/* border-radius: 10px 20px 30px 40px; *//* border-radius: 10px 40px; */border-top-left-radius: 30px;}/* 222.盒子阴影 *//* 语法：box-shadow: h-shadow v-shadow blur spread color inseth-shadow 必需。水平阴影的位置，允许负值(数值越大，影子越往右边偏移)v-shadow 必需。垂直阴影的位置，允许负值(数值越大，影子越往下偏移)blur 可选。模糊距离(影子是虚的还是实的,数值越大，影子越模糊)spread 可选。阴影的尺寸color 可选。阴影的颜色inset 可选。将外部阴影(outset)改为内部阴影注意；1.默认是外阴影(outset),但是不可以书写这个单词，否则将导致阴影无效2.盒子阴影不占空间，不会影响其他盒子的排列位置*/.shadow1 {width: 200px;height: 200px;background-color: pink;margin: 100px auto;/* rgba半透明化 *//* box-shadow: 11px 17px 14px -4px rgba(0, 0, 0, 0.3); */}.shadow1:hover {/* 原先盒子没有影子，当鼠标经过盒子时就添加阴影效果 */box-shadow: 11px 17px 14px -4px rgba(0, 0, 0, 0.3);}/* 文字阴影 *//* 语法: text-shadow: h-shadow v-shadow blur color;h-shadow 必需。水平阴影的位置，允许负值v-shadow 必需。竖直阴影的位置，允许负值blur 可选。模糊的距离)color 可选。模糊的颜(数值越大阴影越虚)*/#character {font-size: 50px;color: orange;font-weight: 700;text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);}.glow-text {color: aqua;font-size: 100px;text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px aqua;}.product-card {width: 300px;padding: 20px;background: orange;border-radius: 10px; /* 圆角边框 */box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); /* 轻微外阴影 */}.product-card h3 {font-size: 20px;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* 文字阴影 */}</style>
</head><body><!-- 圆形的做法 -->圆形<div class="yuanxing"></div><p>分隔</p><!-- 圆角矩形 -->圆角矩形<div class="juxing"></div><p>分隔</p><div class="radius1"></div><p>分隔</p><!-- 盒子阴影测试 --><div class="shadow1"></div><!-- 文字阴影测试 --><div id="character">你是阴影，我是火影</div><div class="glow-text">glow测试</div><div class="product-card"><h3>大夏境内,诸神禁行</h3></div>
</body></html>
七、CSS布局
布局是CSS核心应用，从传统布局到现代布局，覆盖所有页面结构需求。
定位布局
/* 相对定位 */
position: relative;/* 绝对定位 */
position: absolute;/* 固定定位 */
position: fixed;/* 粘性定位 */
position: sticky;
实战案例：绝对定位实现弹窗居中
/* 弹窗容器（fixed定位，覆盖全屏） */
.modal-container {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.5); /* 半透明遮罩 */display: flex;align-items: center;justify-content: center;
}
/* 弹窗内容（absolute定位，相对容器居中） */
.modal-content {position: absolute;width: 500px;height: 300px;background: #fff;border-radius: 8px;padding: 20px;/* 居中关键：top/left 50% + 负margin（基于自身尺寸） */top: 50%;left: 50%;margin-top: -150px; /* 自身高度的一半 */margin-left: -250px; /* 自身宽度的一半 */
}
Flex布局
/* 父容器 */
.flex-container {display: flex;justify-content: center; /* 主轴对齐 */align-items: center; /* 交叉轴对齐 */
}/* 子元素 */
.flex-item {flex: 1; /* 扩张比例 */
}
实战案例：Flex实现导航栏（水平居中+两端对齐）
/* 导航栏容器（Flex布局） */
.nav {display: flex;justify-content: space-between; /* 主轴（水平）两端对齐 */align-items: center; /* 交叉轴（垂直）居中 */height: 80px;background: #fff;padding: 0 20px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* 导航菜单（Flex布局，子项水平排列） */
.nav-menu {display: flex;gap: 30px; /* 菜单项之间间距30px */
}
/* 菜单项（弹性项，不收缩） */
.nav-item {flex-shrink: 0;color: #333;text-decoration: none;font-size: 16px;
}
Grid布局
/* 网格容器 */
.grid-container {display: grid;grid-template-columns: 1fr 1fr 1fr; /* 三列等宽 */gap: 20px; /* 间距 */
}/* 网格项 */
.grid-item {grid-column: 1 / 3; /* 占据第1到第3列 */
}
实战案例：Grid实现经典页面布局（头部+侧边栏+主体+底部）
/* 页面容器（Grid布局，占满视口高度） */
.page-container {display: grid;grid-template-columns: 250px 1fr; /* 2列：侧边栏250px，主体占剩余空间 */grid-template-rows: 80px 1fr 60px; /* 3行：头部80px，主体占剩余空间，底部60px */grid-template-areas: "header header" /* 头部占第1行，跨2列 */"sidebar main" /* 侧边栏占第2行第1列，主体占第2行第2列 */"footer footer"; /* 底部占第3行，跨2列 */height: 100vh; /* 占满视口高度 */gap: 20px; /* 网格项之间间距20px */padding: 20px;box-sizing: border-box;
}
/* 各区域关联网格 */
.header {grid-area: header;background: #007bff;color: #fff;display: flex;align-items: center;padding: 0 20px;
}
.sidebar {grid-area: sidebar;background: #f8f9fa;padding: 20px;
}
.main {grid-area: main;background: #fff;padding: 20px;box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
.footer {grid-area: footer;background: #343a40;color: #fff;display: flex;align-items: center;justify-content: center;
}
八、CSS动画与过渡
通过transition（过渡）和animation（动画）实现元素动态效果，提升页面交互体验，无需依赖JavaScript。
过渡（Transition）
实现元素“状态变化”的平滑过渡（如hover时颜色、尺寸、位置变化），仅需定义“过渡属性”和“过渡时长”，适用于简单的状态切换。
/* 过渡效果 */
.transition-box {transition: all 0.3s ease;
}.transition-box:hover {transform: scale(1.1);
}
动画（Animation）
通过@keyframes定义“关键帧”，实现更复杂的动态效果（如旋转、移动、循环动画），支持多阶段状态控制，适用于需自定义时序的复杂动画。
/* 定义关键帧 */
@keyframes slideIn {from {transform: translateX(-100%);}to {transform: translateX(0);}
}/* 应用动画 */
.animated-box {animation: slideIn 0.5s ease forwards;
}
九、CSS响应式设计
通过技术手段让页面在不同屏幕尺寸（手机、平板、电脑）上自适应显示，核心是“根据设备特性调整样式”。
媒体查询
根据设备的屏幕宽度、分辨率、方向等特性，应用不同的CSS样式，语法为@media 媒体类型 and (媒体特性) { 样式 }。
/* 移动端优先 */
.container {width: 100%;
}/* 平板样式 */
@media (min-width: 768px) {.container {width: 750px;}
}/* 桌面端样式 */
@media (min-width: 1200px) {.container {width: 1170px;}
}
实战案例：响应式导航栏
/* 桌面端导航栏（默认样式，屏幕>768px） */
.nav {display: flex;justify-content: space-between;padding: 0 20px;height: 80px;
}
/* 桌面端菜单（显示） */
.nav-menu {display: flex;gap: 30px;
}
/* 移动端菜单按钮（隐藏） */
.nav-toggle {display: none;font-size: 24px;cursor: pointer;
}/* 移动端样式（屏幕≤768px） */
@media (max-width: 768px) {.nav {padding: 0 15px;}/* 隐藏桌面端菜单 */.nav-menu {display: none;/* 移动端菜单展开样式（可通过JS控制显示） */flex-direction: column;position: absolute;top: 80px;left: 0;width: 100%;background: #fff;padding: 15px 0;box-shadow: 0 2px 8px rgba(0,0,0,0.1);}/* 显示移动端菜单按钮 */.nav-toggle {display: block;}
}
视口设置
必须在HTML头部添加<meta name="viewport">标签，确保移动端浏览器正确识别屏幕尺寸，避免页面缩放异常：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
十、CSS高级特性
CSS变量（Radial Gradient）
定义可复用的变量，实现“一处修改，全局生效”，支持动态修改（通过JS），语法为--变量名: 值，使用时通过var(--变量名)调用。
:root {--primary-color: #007bff;--font-size: 16px;
}.box {color: var(--primary-color);font-size: var(--font-size);
}
渐变（Repeating Gradient）
生成平滑的颜色过渡效果，无需使用图片，分为线性渐变、径向渐变、重复渐变等。
/* 线性渐变 */
.linear-gradient {background: linear-gradient(to right, #007bff, #6610f2);
}/* 径向渐变 */
.radial-gradient {background: radial-gradient(circle, #fff, #007bff);
}
阴影（Box Shadow & Text Shadow）
添加阴影效果，增强元素层次感，支持多阴影叠加。
总结
CSS是现代Web开发不可或缺的技术，掌握其核心概念和高级特性对于创建美观、响应式的网页至关重要。通过本文的系统学习，相信读者能够熟练运用CSS的各种功能，创造出令人印象深刻的网页效果。
参考链接：https://blog.csdn.net/2401_86760859/article/details/154074924