一、CSS3选择器
1. 属性选择器
属性选择器是 CSS 中的一种选择器，用于选择具有特定属性或属性值的 HTML 元素。
2. 伪类选择器
伪类选择器是 CSS 中的一种强大工具，用于选择元素的特定状态或位置，而不需要增加额外的类或 ID。它们通常用于处理用户交互或文档结构的变化。
:hover（鼠标悬停）、:focus（获得焦点）、:active（被激活）、:nth-child(n)（选择第 n 个子元素）、:first-child（第一个子元素）、:last-child（最后一个子元素）、:not(selector)（不匹配指定选择器的元素）、:checked（被选中的复选框）和 :disabled（禁用的输入元素）
3. 兄弟选择器
在 HTML 中，兄弟标签（或兄弟元素）指的是同一个父元素下的不同元素。这些元素可以是同一类型或不同类型，并且它们共享相同的父元素。使用兄弟选择器，可以在 CSS 中选择这些元素并应用样式。
4. 相邻选择器
二、CSS3属性
1. 盒子模型
CSS3 的盒子模型是理解网页布局和设计的基础概念。它描述了每个元素在网页中占据的空间，包括其内容、内边距、边框和外边距。
内容：实际显示的内容，如文本和图像。可以通过 width 和 height 属性设置。
内边距：内容与边框之间的空间。使用 padding 属性设置，可以分别定义四个方向的内边距（padding-top、padding-right、padding-bottom、padding-left）。
边框：包围内边距和内容的边框。使用 border 属性设置边框的宽度、样式和颜色。
外边距：元素与其他元素之间的空间。使用 margin 属性设置，可以分别定义四个方向的外边距（margin-top、margin-right、margin-bottom、margin-left）。
总宽度 = width + padding + border + margin
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 盒子模型</title>
<style>
.box {
width: 200px; /* 内容宽度 */
padding: 20px; /* 内边距 */
border: 5px solid black; /* 边框 */
margin: 10px; /* 外边距 */
box-sizing: border-box; /* 使用替代盒子模型 */
}
</style>
</head>
<body>
<div class="box">这是一个盒子模型示例。</div>
</body>
</html>2. 背景图
在 CSS 中，背景图片用于为元素添加视觉效果，可以增强网页的美观性和吸引力。以下是使用背景图片的基本方法和常用属性。
3. 边框背景图
在 CSS 中，可以为元素的边框添加背景图像，这样可以创建丰富的视觉效果。尽管没有直接的 CSS 属性专门用于边框背景图，但可以通过一些技巧来实现类似效果。
4. 文本和盒子阴影
在 CSS 中，阴影效果可以通过 box-shadow 和 text-shadow 属性来实现。这些属性可以为元素和文本添加深度感，从而增强视觉效果。
box-shadow: h-offset v-offset blur-radius spread-radius color inset;
h-offset: 水平偏移量，阴影相对于元素向右的距离（负值表示向左）。
v-offset: 垂直偏移量，阴影相对于元素向下的距离（负值表示向上）。
blur-radius: 模糊半径，值越大，阴影越模糊。
spread-radius: 扩展半径，值为正时阴影扩大，值为负时阴影缩小。
color: 阴影的颜色。
inset: 可选，定义阴影是外部阴影还是内部阴影。
text-shadow: h-offset v-offset blur-radius color;
h-offset: 水平偏移量，阴影相对于文本向右的距离（负值表示向左）。
v-offset: 垂直偏移量，阴影相对于文本向下的距离（负值表示向上）。
blur-radius: 模糊半径，值越大，阴影越模糊。
color: 阴影的颜色。
5. 渐变
在 CSS 中，渐变是一种平滑过渡的颜色效果，可以用于背景、边框等元素。主要有两种类型的渐变：线性渐变和放射渐变。
6. 2d/3d转变
在 CSS 中，2D 和 3D 转变可以用来创建平滑的动画效果，使元素在不同状态之间过渡。以下是如何实现 2D 和 3D 转变的基本概念和示例。
7. 过渡
在 CSS 中，过渡是一个强大的功能，它允许你在元素的状态变化时创建平滑的动画效果。通过定义何时、如何以及延迟应用样式变化，可以增强用户体验。
过渡属性（property）：指定要应用过渡效果的 CSS 属性。
持续时间（duration）：指定过渡效果持续的时间。
速度曲线（iming-function）：定义过渡的速度变化，决定过渡效果的流畅度。
延迟时间（delay）：指定在开始过渡之前的等待时间。
transition: property duration timing-function delay;
8. 动画
在 CSS 中，动画用于创建更加复杂的视觉效果，使元素在状态变化时能够进行平滑的过渡。与过渡相比，动画提供了更大的灵活性，可以通过关键帧控制多个样式的变化。
@keyframes: 定义动画的关键帧，描述动画的样式变化。
百分比： 0% 表示动画开始，100% 表示动画结束，中间可以有多个关键帧。
animation-name： 指定动画的名称，引用 @keyframes 的名称。
animation-duration： 定义动画的持续时间（如 2s）。
animation-timing-function： 定义动画的速度曲线，如 linear、ease、ease-in、ease-out 等。
animation-delay： 定义动画开始前的延迟时间（如 0.5s）。
animation-iteration-count： 定义动画播放的次数（如 infinite 表示无限次）。
animation-direction： 定义动画的播放方向，如 normal、reverse、alternate 等。
animation-fill-mode： 定义动画结束后元素的样式状态，如 forwards、backwards、both 等。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基本模板</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
/* margin: 100px; */
}
/* 动画 */
/* @-o-keyframes{} 欧胖 */
/* @-moz-document 名称{} 火狐 */
/* 定义动画 */
/* @keyframes animat {
from{
margin-left: 0;
}
to{
margin-left: 500px;
}
} */
@keyframes animat {
0%{
margin-left: 0;
transform: scale(.5);
}
50%{
margin-left: 500px;
transform: scale(1);
}
100%{
margin-left: 0px;
transform: scale(0.5);
}
}
.box-1{
/* 名称 */
animation-name: animat;
/* 持续时间 */
animation-duration: 2s;
/* 匀速 */
animation-timing-function: linear;
/* 执行次数 */
animation-iteration-count: infinite;
/* 结束位置 */
animation-fill-mode: backwards;
/* 执行方向 */
animation-direction: normal;
}
.box-1:hover{
/* 停止动画 */
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="box box-1"></div>
<div class="box box-2"></div>
<script>
</script>
</body>
</html>9. 媒体查询
媒体查询是 CSS 中用于响应式设计的强大工具。它允许你根据设备的特性（如屏幕宽度、高度、分辨率等）来应用不同的样式。这使得网页能够在不同设备上（如手机、平板和桌面）表现良好。
min-width: 设备宽度大于等于指定值。
max-width: 设备宽度小于等于指定值。
min-height: 设备高度大于等于指定值。
max-height: 设备高度小于等于指定值。
orientation: 设备方向，例如 portrait（纵向）或 landscape（横向）。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基本模板</title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
button {
border: 0;
}
a {
color: #000;
text-decoration: none;
}
nav {
background-color: #ccc;
position: relative;
}
.container {
width: 90%;
margin: 0 auto;
}
.navbar {
display: flex;
}
.navbar li a {
display: block;
padding: 15px 30px;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.btn {
padding: 10px 30px;
margin: 6px 15px;
}
.btn-toggle {
float: left;
display: none;
cursor: pointer;
}
@media (max-width : 770px){
.container{
width: 100%;
}
.btn-toggle{
display: block;
}
.navbar{
width: 100%;
display: none;
position: absolute;
top: 44px;
}
.navbar li a{
width: 100%;
box-sizing: border-box;
background-color: #ccc;
border-bottom: 1px solid #fff;
padding: 10px 30px;
}
}
</style>
</head>
<body>
<nav class="nav">
<div class="container">
<button class="btn btn-toggle">菜单</button>
<ul class="navbar">
<li><a href="#">首页</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">服务案列</a></li>
<li><a href="#">合作伙伴</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</nav>
<script>
var btn = document.querySelector(".btn-toggle")
var navbar = document.querySelector(".navbar")
var isShow = true
btn.onclick = function(){
if(isShow){
navbar.style.display = "block"
}
else{
navbar.style.display = "none"
}
isShow = !isShow
}
var chang = function(){
var width = window.innerWidth
if(width > 770){
navbar.style.display = "flex"
}
else{
navbar.style.display = "none"
}
}
window.addEventListener("resize",chang)
chang()
</script>
</body>
</html>上诉代码运行的结果如下：
10. 字体
进入https://www.zhaozi.cn/ 网可以找到不同的字体，可以免费下载字体。
11. 列布局
列布局是网页设计中常用的一种布局方式，可以通过 CSS 的多种方式实现。以下是几种常见的方法来创建列布局，包括使用 Flexbox、CSS Grid 和传统的浮动布局。
12. 弹性布局
弹性布局（Flexbox）是一种一维布局模型，能够在容器内有效地分配空间并对齐元素。它特别适用于需要响应式设计的场景，能够轻松地调整子元素的大小和排列。
display: flex;: 将元素定义为弹性容器。
flex-direction: 定义主轴的方向。
row（默认）：从左到右。
column：从上到下。
justify-content: 定义主轴上的对齐方式。
flex-start: 默认，向开始对齐。
center: 居中对齐。
space-between: 项目之间均匀分布。
space-around: 项目之间留出相等的空间。
align-items: 定义交叉轴上的对齐方式。
stretch（默认）：拉伸以填满容器。
flex-start: 向开始对齐。
center: 居中对齐。
flex-end: 向结束对齐。
flex-grow: 定义项目的放大比例。
flex-shrink: 定义项目的缩小比例。
flex-basis: 定义项目在分配多余空间之前的基础大小。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性布局示例</title>
<style>
.container {
display: flex; /* 创建弹性容器 */
flex-direction: row; /* 主轴方向为行 */
justify-content: space-between; /* 项目之间均匀分布 */
align-items: center; /* 交叉轴居中对齐 */
height: 100px;
background-color: #f4f4f4;
padding: 10px;
}
.item {
flex: 1; /* 每个项目均等分配空间 */
margin: 0 10px; /* 项目之间的水平间距 */
padding: 20px;
background-color: lightcoral;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">项目 1</div>
<div class="item">项目 2</div>
<div class="item">项目 3</div>
</div>
</body>
</html>13. 倒影
-webkit-box-reflect 是一个非标准的 CSS 属性，用于创建元素的倒影效果。它主要在 WebKit 内核的浏览器（如 Safari）中支持。虽然它非常简单易用，但由于其非标准性质，建议在使用时考虑兼容性。
14. 裁剪标签
clip-path 是 CSS 中的一个属性，用于定义一个元素的可见区域，可以用于创建各种形状的裁剪效果。通过设置不同的形状，可以实现独特的视觉效果。
clip-path: <shape> | <url> | none;
<shape>：可以是各种形状的关键字（如 circle()、ellipse()、polygon()、inset()）或 SVG 路径。
<url>：指向 SVG 图形的 URL。
none：表示没有裁剪。
15. 背景模糊
filter 是 CSS 中的一个属性，用于为元素应用各种图形效果，如模糊、亮度、对比度、灰度等。这个属性可以用于图像、文本或任何其他 HTML 元素，以实现不同的视觉效果
16. 网格布局
网格布局是 CSS 中一种强大的布局系统，允许开发者以二维方式排列和对齐元素。与 Flexbox 相比，Grid 更适合处理复杂的布局。
grid-template-rows：定义网格的行模式。
grid-template-columns：定义网格的列模式
align-content：控制网格内容在交叉轴方向（垂直）上的对齐方式。
row-gap：设置行间距
column-gap：设置列间距。
具体代码如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基本模板</title>
</head>
<body>
<style>
ul {
padding: 0;
margin: 0;
list-style: none;
}
ul {
width: 600px;
height: 400px;
background-color: #ccc;
/* 网格系统 */
/* 把ul标签（父元素）设置成网格容器 */
display: grid;
/* 设置两行，每一行高度100px */
/* grid-template-rows: 100px 100px; */
/* grid-template-rows: 1fr 1fr; */
/* 设置两行，每一行高度50px */
grid-template-rows: repeat(4, 50px);
/* 设置三列，每一列宽度为150px */
grid-template-columns: 150px 150px 150px;
/* 第一列（占2/4） */
/* 第二列（占1/4） */
/* 第三列（占1/4） */
/* grid-template-columns: 1fr 1fr 1fr; */
/* 设置网格内容水平居中 */
justify-content: center;
/* 设置网格内容垂直居中 */
align-content: center;
/* 行间距 */
row-gap: 10px;
/* 列间距 */
column-gap: 10px;
/* 给网格容器划分区域 */
grid-template-areas:
'a b c'
'd e f'
'. . .'
'. . .';
}
ul li {
border: 2px solid #f0f0f0;
}
.c1 {
background-color: deeppink;
/* 根据单元格标记设置子元素的位置 */
grid-area: f;
}
.c6 {
background-color: deepskyblue;
/* 根据单元格标记设置子元素的位置 */
grid-area: a;
}
</style>
<!-- 父元素（网格容器） -->
<ul>
<!-- 子元素（单元格） -->
<li class="c1">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li class="c6">6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</body>
</html>