当前位置：首页 > news >正文

CSS中的字体样式、文本样式、列表样式以及背景和渐变

news 2026/2/8 23:47:12

一、字体样式和文本样式

1.span标签

span标签的作用：能让某几个文字或者是词语凸显出来

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>span</title><style>.show{color: red;}</style>
</head>
<body><p>享受华为<span class="show">人工智能</span>带来的方便</p>
</body>
</html>

2字体样式

属性名	含义	举例
font-family	设置字体类型	font-family:“华文彩云”；
font-size	设置字体大小	font-size:12px;
font-style	设置字体风格	font-style:italic;
font-weight	设置字体粗细	font-weight：bold(700);
font（注意顺序）	在一个声明中设置所有字体属性	font:italic bold 30px “华文彩云”;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>03字体样式</title><style>p{font-family: "华文彩云";  /*字体类型*/font-size: 30px;  /*字体大小*/font-style: italic;  /*字体风格   italic：斜体*/font-weight:700;   /*设置字体的粗细   bold (700)：加粗*/}span{font: italic bold 30px "华文彩云";  /*注意顺序：风格  粗细  大小   类型*/}</style>
</head>
<body><p>基建大国</p><span>厉害了，我的锅</span>
</body>
</html>

2.1字体类型

可以在一个页面中分别设置中文和英文字体

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>04字体类型补充</title><style>p{font-family:'Times New Roman', "Times", "华文彩云";}</style>
</head>
<body><p>of people or behaviour 人或举止大胆自信的；敢于表白情感的；敢于冒险的
brave and confident; not afraid to say what you feel or to take risks
</p>
</body>
</html>

2.2字体大小

font-size单位：

px(像素)
em、rem、cm、mm、pt、pc（1em大概是16px）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>05字体大小</title><style>p{font-size: 32px;}span{font-size: 2em;  /*1em大概是16px*/}</style>
</head>
<body><p>我爱中国</p><span>我爱世界</span>
</body>
</html>

2.3font属性

font的属性顺序：字体风格-字体粗细-字体大小-字体类型

3.文本样式

3.1文本属性

属性	含义	举例
color	颜色	color:#00c;
text-align	水平对齐方式	text-align：right;
text-indent	首行文本缩进	text-indent:20px;
line-height	文本行的高度	line-height：25px；
text-decoration	文本装饰	text-decoration：underline;

3.2文本颜色

RGB （Red Green Blue）：

十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色的分量，最后两位表示蓝色的分量

rgb(r,g,b)，RGB的取值只能是正整数，取值范围为0~255 ，如：rgb（255，0，0）

因为是十六进制可以取值：0 1 2 3 4 5 6 7 8 9 A B C D E F。，也可以取值：#FF0000

RGBA：

在rgb的基础上增加了一个控制alpha透明度的参数，其中可以取值0~1，如：color: rgba(255, 0, 0, 0.2);

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>06文本颜色</title><style>p{/* color: red; *//* color: #fa0000; *//* color: rgb(0,0,0); */color: rgba(255, 0, 0, 0.5);}</style>
</head>
<body><p>世界你好！</p>
</body>
</html>

3.3 水平对齐方式（text-align）

适用于块级元素原因：块级元素独占一行

块级元素：h1-h6 p li dl/dt/dd div

属性值	说明
left	文本排列到左边，默认值
right	文本排列到右边
center	文本排列在中间
justify	实现文本两端对齐效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>07text-align</title><style>p{text-align: center;}</style>
</head>
<body><h1>你好中国</h1><p><span>厉害了，我的国！</span><span>遥遥领先</span></p><span>你好世界</span>
</body>
</html>

3.4首航文本缩进（text-indent）

单位：

em（推荐，1em就等于一个汉字）
px

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{/*text-indent: 28px; 缩进可以使用像素为单位*/text-indent: 2em;}</style>
</head>
<body><p>当地时间9月19日，中国第22批赴黎维和部队多功能工兵分队营区周边多枚航弹爆炸，造成部分设施受损。</p>
</body>
</html>

3.5行高（line-height）

单位：px

设置行高后字体会自动放在整行的中间

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>05行高</title><style>#test{line-height: 100px;}</style>
</head>
<body><p id="test">初步计票结果显示</p><p >斯里兰卡国家人民力量党领导人迪萨纳亚克赢得总统选举】斯里兰卡选举委员会22日公布的初步计票</p><p >国家人民力量党领导人迪萨纳亚克在21日举行的总统选举中胜出。（新华社）</p></body>
</html>

3.6文本装饰（text-decoration）

值	说明
none	默认值，无文本装饰（定义的标准）
underline	文本的下划线
overline	文本的上划线
line-through	文本的删除线

在这里插入图片描述

4.文本阴影

4.1语法

x轴位移：用来指定阴影水平位移（x轴数值为正）向右

y轴位移：用来指定阴影垂直位移（y轴数值为正）向下

模糊半径：阴影向外模糊的范围

语法中不需要逗号，只需要以;结尾

text-shadow:阴影颜色 x轴位移 y轴位移 模糊半径；

在这里插入图片描述

二、超链接伪类

伪类：伪类（Pseudo-classes）是CSS（层叠样式表）中的一种特殊选择器，用于选择处于特定状态或满足特定条件的元素，并为其定义不同的样式。伪类选择器的基本语法是在选择器后面加上冒号和伪类名称，然后是花括号中包含的CSS属性和值。

1.伪类样式

语法：

标签名：伪类名{声明;}

如：

a:hover{color:red;text-decoration:underline;
}

2.常用伪类

伪类名称	含义
a:link	未单击访问时超链接的样式
a:hover	鼠标悬浮其上的超链接样式
a:active	鼠标单机未释放的超链接样式
a:visited	单击访问后超链接的样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>15超链接伪类</title><style>a {font-size: 25px;}/* 未单击访问时超链接的样式 (可以不用) */a:link {color: black;  /*字体颜色为黑色*/text-decoration: none; /*无下划线*/}/* 鼠标悬浮其上的超链接样式 */a:hover {color: green;  /*字体颜色为绿色*/}/* 鼠标单击未释放的超链接样式 */a:active {color: blue; /*字体颜色为蓝色*/}/* 单击访问后超链接的样式 */a:visited {color: red;}</style>
</head>
<body><a href="#">这是百度链接地址</a>
</body>
</html>

三、列表样式

list-style-type: 列表中项目符号的类型如实心圆点、空心圆点、实心方块

list-style-image：这个属性允许开发者使用一张图片来替换默认的列表项符号

list-style-position:用于设置列表项标记（通常是项目符号或编号）相对于列表项内容的位置

list-style

1.list-style-type

设置列表中项目符号的类型如实心圆点、空心圆点、实心方块

值	说明
none	无标记符号
disc	实心圆点（默认值）
circle	空心圆点
square	实心方块
decimal	十进制阿拉伯数字

2.list-style-image

这个属性允许开发者使用一张图片来替换默认的列表项符号

在这里插入图片描述

3.list-style-position

list-style-position:用于设置列表项标记（通常是项目符号或编号）相对于列表项内容的位置

4.list-style

<style>p{list-syle:none;	}
</style>

四、背景

1.background-color

背景颜色

 <style>#nav {width: 230px; /*宽度*/background-color: #D7D7D7;  /*背景颜色*/}
</style>

2.background-image和background-repeat

背景图片

background-repeat 是CSS（层叠样式表）中的一个属性，用于设置背景图像是否以及如何重复。它定义了背景图像在元素背景区域中的平铺模式

属性值	说明
repeat	沿水平和垂直两个方向平铺
no-repeat	不平铺，图像只显示一次
repeat-x	沿水平方向平铺
repeat-y	沿垂直方向平铺

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>18背景图片</title><style>div{width: 800px;height: 600px;border: 1px solid red; /*边框：粗细1px、实线、红色*/background-image: url(image/1.jpg);  /*背景图片，默认会铺满整个*/background-repeat: repeat-y;  /*背景图片重复方式*/}</style>
</head>
<body><div></div>
</body>
</html>

3.background-position

调整背景图片位置

值	含义
X、Y方向关键字	水平方向的关键词：left、center、right 垂直方向的关键词：top、center、bottom
X%、Y%	使用百分比表示背景图片的位置
Xpos Ypos	单位：px Xpos表示水平位置，Ypos表示垂直位置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>18背景图片</title><style>div{width: 800px;height: 600px;border: 1px solid red; /*边框：粗细1px、实线、红色*/background-image: url(image/1.jpg);  /*背景图片，默认会铺满整个*/background-repeat: no-repeat;  /*背景图片重复方式*//* 第一个控制水平方向，第二个控制垂直方向*//* background-position: left bottom; *//* background-position: 0% 50%; */background-position: 30px 20px;}</style>
</head>
<body><div></div>
</body>
</html>

4.background-size

/*背景图片的大小，第一个表示宽，第二个表示高度*/
background-size:20px 120px;

属性值	说明
auto	默认值
percentage	当使用百分比值的时候，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的
cover	图片放大填充了整个元素
contain	让背景图片保持本身的宽高比例，将背景图片缩放到宽度或高度正好适应所定义背景的区域

5.合在一起写

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;border: 1px solid red;/* background-image: url(image/1.jpg);background-size: 20px 20px;background-repeat: no-repeat;background-position: 50%; */background: url(image/1.jpg) no-repeat center center;  /*可以写一起，没有顺序和全部必写的要求*/background-size: 20px 20px;}</style>
</head>
<body><div></div>
</body>
</html>

五、CSS渐变

线性渐变
- 颜色沿着一条直线过度：从左到右、从右到左，从上到下等等
径向渐变
- 圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝着所有的方向混合

1.CSS渐变兼容

IE浏览器的内核Trident，加前缀：-ms-
Chrom浏览器内核是Webkit，前缀加：-Webkit-
Safari浏览器内核是Webkit，加前缀：-Webkit-
Opear浏览器内核是Blink,加前缀：-o-
Firefox浏览器内核是Mozilla，加前缀：-moz-

2.渐变性

linear：直线

gradient：坡度

语法：

linear-gradient(渐变方向,第一种颜色，第二种颜色...后面可以包含多种颜色)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>20渐变</title><style>div{width: 100px;height: 100px;/* to top background: linear-gradient(to top,orange,blue);*//* background: -webkit-linear-gradient(to top,orange,blue); *//* to bottom background: linear-gradient(to bottom,orange,blue);*//* to left background: linear-gradient(to left,orange,blue);*//* to right background: linear-gradient(to right,orange,blue);*//* to top left background: linear-gradient(to top left,orange,blue);*//* to top right */background: linear-gradient(to top right,orange,blue,green,red);/* to bottom left *//* to bottom right */}</style>
</head>
<body><div></div>
</body>
</html>

20渐变

CSS中的字体样式、文本样式、列表样式以及背景和渐变

一、字体样式和文本样式 1.span标签 span标签的作用：能让某几个文字或者是词语凸显出来 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-…...

编程日记 2024/9/26 15:14:06

教你如何在Java中操作Redis

Redis的Java客户端 Redis 的 Java 客户端很多，常用的几种： Jedis：基于 Java 的 Redis 客户端，提供了 Redis 命令的全面支持。Lettuce：高性能的 Java 客户端库，用于与 Redis 数据库进行交互。它支持同步、…...

编程日记 2024/9/26 15:13:05

一安装参考 nsight-compute使用教程-CSDN博客https://blog.csdn.net/youzjuer/article/details/142549332 二使用 nsys profile -t cuda,nvtx --force-overwrite true -o xxxx python xxx.py xxxx表示生成文档的名字如果是cuda c 则 python xxx.py替换为./xxx即可这…...

编程日记 2024/9/26 15:12:03

进程的那些事--进程控制

目录前言一、创建进程二、退出进程 void exit (int retval) 三、进程等待四、进程替换前言提示：这里可以添加本文要记录的大概内容： 前面我们认识了进程，现在让我们认识几个进程的接口提示：以下是本篇文章正文内容…...

编程日记 2024/9/26 15:11:02

FortiOS SSL VPN 用户访问权限配置

简介使用不同用户组或用户登录 SSL VPN 隧道模式后，可配置不同的访问权限。本文介绍为不同用户组分配不同访问权限的配置方法。相关组件 FortiGate：FortiOS v6.4.14 build2093 (GA) 客户端：Windows11，安装 FortiClient VPN 7.…...

编程日记 2024/9/26 15:10:00

C++_vector类

欢迎来到本期节目- - - vector类本期直接先上代码，然后以代码为例介绍需要注意的问题. 模拟实现： #pragma once #include<iostream> #include<assert.h> using namespace std;namespace my_room {template<class T>class vector{p…...

编程日记 2024/9/26 15:07:58

Spring Boot入门到精通：网上购物商城系统

第3章系统分析 3.1 可行性分析在系统开发之初要进行系统可行分析，这样做的目的就是使用最小成本解决最大问题，一旦程序开发满足用户需要，带来的好处也是很多的。下面我们将从技术上、操作上、经济上等方面来考虑这个系统到底值不值得开发。…...

编程日记 2024/9/26 15:05:55

在Vue.js中，你可以使用Element UI的el-input组件结合计算属性来实现模糊查询

<template><div><el-input v-model"searchQuery" placeholder"请输入查询内容"></el-input><div v-for"item in filteredList" :key"item">{{ item }}</div></div> </template><s…...

编程日记 2024/9/26 15:04:54

delphi制作漂亮的农历窗体（IntraWeb+Layui的完美结合）

delphi制作漂亮的农历窗体（IntraWebLayui的完美结合） 不需要安装服务器，Apache和IIS都不需要，自带企业级服务器。运行exe服务器就架好了，直接打开手机浏览器或者电脑浏览器，网页就出来了，如果…...

编程日记 2024/9/26 14:59:44

发票OFD格式转换成PDF

引入依赖，低版本的报错，2.0.2能够实现转换 <dependency><groupId>org.ofdrw</groupId><artifactId>ofdrw-converter</artifactId><version>2.0.2</version><exclusions><exclusion><groupId&g…...

编程日记 2024/9/26 14:56:41

高通AI应用程序开发3：网络模型(一)

1. 支持的网络模型 Qualcomm神经处理SDK支持下表所列的网络模型。有关支持的运行时和单个图层类型的限制和约束的详细信息，请参阅限制。 GPU运行时中支持的所有层对两种GPU模式都有效：GPU_FLOAT32_16_HYBRID和GPU_FLAAT16。GPU_FLOAT32_16_HYBRID-…...

编程日记 2024/9/26 14:52:36

03. 前端面试题之ts : typescript 的数据类型有哪些？

文章目录一、typescript是什么二、typescript有哪些数据类型booleannumberstringarraytupleenumanynull 和和 undefinedvoidneverobject 三、总结一、typescript是什么 typescript 和 javascript几乎一样，拥有相同的数据类型，另外在javascript基础上…...

编程日记 2024/9/26 14:51:34

PyCharm和VS Code 安装通义灵码，可本地安装包安装，解决插件安装不上问题

PyCharm和VS Code 安装通义灵码，可本地安装包安装，解决插件安装不上问题 PyCharm、VS Code 安装通义灵码介绍主要应用场景支持编程语言安装指南JetBrains IDEs 中安装指南步骤 1：准备工作步骤 2：在 JetBrains IDEs 中安装通义灵码…...

编程日记 2024/9/26 14:49:33

机器人速度雅可比矩阵求解(2自由度平面关节机器人)

关节速度和末端速度空间的映射需要计算雅可比矩阵的逆矩阵，在博途PLC里如何计算一个方阵的逆矩阵，大家可以参考下面这篇文章：博途PLC矩阵求逆矩阵求逆博图SCL_博图矩阵运算-CSDN博客文章浏览阅读839次。本文介绍如何用C语言实现矩阵求逆的过程，详细解析了相关代码，适…...

编程日记 2024/9/26 14:48:31

【AI大模型-文心-思维树解读-开篇】

提问：什么是“”“思维树”“”模型框架回答：如下版本：文心大模型3.5 “思维树”（Tree of Thoughts, ToT）模型框架是一个利用大型语言模型进行问题解决的框架。它借鉴了人类认知研究的成果，特别是关于人…...

编程日记 2024/9/26 14:46:29

2、electron vue3 怎么创建子窗口，并给子窗口路由传参

接上回初始化vue3 electron项目，创建完vue3 electron项目后，现在要实现在渲染进程中点击按钮创建一个新的子窗口开始子窗口创建操作只能在主线程内完成，而创建操作是在渲染线程触发，因此就需要进行两者间的通讯。 1、创建子窗…...

编程日记 2024/9/26 14:45:28

8.pod数据持久化

💂 个人主页: Java程序鱼 💬 如果文章对你有帮助，欢迎关注、点赞、收藏(一键三连)和订阅专栏 👤 微信号：hzy1014211086，想加入技术交流群的小伙伴可以加我好友，群里会分享学习资料、学习方法…...

编程日记 2024/9/26 14:44:26

C语言 | Leetcode C语言题解之第436题寻找右区间

题目： 题解： typedef struct {int start;int index; } Node;int cmp(const void *pa, const void *pb) {return ((Node *)pa)->start - ((Node *)pb)->start; }int* findRightInterval(int** intervals, int intervalsSize, int* intervalsColSiz…...

编程日记 2024/9/26 14:43:24

SpringBoot3中ymal配置文件(持续更新)

博客主页：音符犹如代码系列专栏：JavaWeb关注博主，后期持续更新系列文章如果有错误感谢请大家批评指出，及时修改感谢大家点赞👍收藏⭐评论✍ 在SpringBoot项目中,使用application.properties进行配置管理时，…...

编程日记 2024/9/26 14:42:23

Linux 基础IO 2

读取与写入 read与fread 在基础IO 1中我们学会了open和fopen的函数这两个函数是用于为进程打开文件也可以理解为为进程和文件建立了一个链接使其可以交互。那我们建立号链接之后肯定还是需要对文件进行操作，现在我们先来了解读取操作。 read： 这是一…...

编程日记 2024/9/26 14:41:22

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架，用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录，以帮助监视应用程序行为和诊断问题。可以通过配置不同的记录提供程…...

编程新知 2026/2/8 4:37:06

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？ 在 Golang 的面试中，map 类型的使用是一个常见的考点，其中对 key 类型的合法性是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

编程新知 2025/12/20 7:42:02

AI Agent与Agentic AI：原理、应用、挑战与未来展望

文章目录一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程三、AI Agent的核心技术栈解密3.1 感知模块代码示例：使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例：使用OpenAI GPT-3进…...

编程新知 2026/1/23 7:04:53

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现，展示如何创建和管理多个 OkHttpClient 实例，分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

编程新知 2025/12/15 1:34:37

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口目录第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2026/2/1 13:28:03

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...

编程新知 2026/1/4 2:33:39

定时器任务——若依源码分析

分析util包下面的工具类schedule utils： ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类，封装了定时任务的创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz，先构建任务的 JobD…...

编程新知 2026/1/26 14:24:46

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址：pdf 英文是纯手打的！论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误，若有发现欢迎评论指正！文章偏向于笔记，谨慎食用目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

编程新知 2026/2/6 14:42:11

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式（Python 实现） 在 Python 中，你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是，.doc 是旧的 Word 格式，而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

编程新知 2025/12/13 22:42:30

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“🤖手搓TuyaAI语音指令 😍秒变表情包大师，让萌系Otto机器人🔥玩出智能新花样！开整！” 🤖 Otto机器人 → 直接点明主体手搓TuyaAI语音 → 强调自主编程/自定义语音控制（TuyaAI…...

编程新知 2026/1/30 16:09:53

一、字体样式和文本样式

1.span标签

2字体样式

2.1字体类型

2.2字体大小

2.3font属性

3.文本样式

3.1文本属性

3.2文本颜色

3.3 水平对齐方式（text-align）

3.4首航文本缩进（text-indent）

3.5行高（line-height）

3.6文本装饰（text-decoration）

4.文本阴影

4.1语法

二、超链接伪类

1.伪类样式

2.常用伪类

三、列表样式

1.list-style-type

2.list-style-image

3.list-style-position

4.list-style

四、背景

1.background-color

2.background-image和background-repeat

3.background-position

4.background-size

5.合在一起写

五、CSS渐变

1.CSS渐变兼容

2.渐变性

相关文章：