【前端三剑客】CSS3 层叠样式表
更新日期：2022/04/05
只要我们一起大笑，可怕的东西就会跑光光了。
目録
-
- 1. CSS3 简介
- 2. CSS3 边框
- 3. CSS3 渐变
- 4. CSS3 字体
-
- 4.1 字体库格式
- 5. CSS3 2D转换
- 6. CSS3 多列
- 7. CSS3 模态弹框（Modal）
- 8. CSS3 图片滤镜
- 9. CSS3 弹性盒子
- 10. CSS3 多媒体
- 【每日一面】
-
-
-
-
- 不同元素垂直居中的方法
-
-
-
1. CSS3 简介
CSS3（Cascading Style Sheets Level 3）层叠样式表，是 CSS 技术的升级版本，于1999年开始制订，2001年5月23日 W3C 完成了 CSS3 的工作草案，CSS 演进的一个主要变化就是 W3C 决定将 CSS3 分成一系列模块（旧规范已拆分成小块，还增加了新的）。模块主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
更多内容 → 菜鸟教程 - CSS3教程
更多内容 → css3特效
- CSS 兼容
| 厂商 | 前缀 |
|---|---|
| Chrome（谷歌浏览器） | -webkit- |
| Safari（苹果浏览器） | -webkit- |
| Firefox（火狐浏览器） | -moz- |
| lE（IE浏览器） | -ms- |
| Opera（欧朋浏览器） | -o- |
2. CSS3 边框
- 圆角边框
- 阴影边框
- 图像边框
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IT God Roadtitle>
<style>
img {
margin-left: 500px;
}
div {
width: 500px;
margin: 50px auto auto;
padding-left: 8px;
}
#radius {
border: 2px solid;
border-radius: 25px;
}
#shadow {
box-shadow: 10px 10px 5px #888888;
}
#round {
border: 10px solid transparent;
border-image: url(../static/image/balloon.jpeg) 100 round;
}
#stretch {
border: 10px solid transparent;
border-image: url(../static/image/balloon.jpeg) 100 stretch;
}
style>
head>
<body>
<div id="radius">圆角边框div>
<br/>
<div id="shadow">阴影边框div>
<br/>
<div id="round">图像平铺边框div>
<br/>
<div id="stretch">图像拉伸边框div>
<img src="../static/image/balloon.jpeg" alt="" width="50px">
body>
html>
3. CSS3 渐变
- 线性渐变
线性渐变（Linear Gradients）：可以设置一个起点和一个方向或一个角度 - 向下/向上/向左/向右(to right)/对角方向(to bottom right)
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IT God Roadtitle>
<style>
#linear-gradient {
height: 200px;
background-color: red; /* 不支持线性的时候显示 */
background-image: linear-gradient(to bottom right, red, yellow);
}
#repeating-linear-gradient {
height: 200px;
background-color: red; /* 不支持线性的时候显示 */
background-image: repeating-linear-gradient(45deg,red 2%,yellow 5%,green 10%);/* 指定渐变的起止颜色，由颜色值、停止位置（可选，使用百分比指定）组成。*/
}
style>
head>
<body>
<h3>线性渐变 - 对角h3>
<p>从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到黄色：p>
<div id="linear-gradient">div>
<h3>重复线性渐变 - 指定角度h3>
<p>从左上角开始（到右下角）的重复线性渐变。p>
<div id="repeating-linear-gradient">div>
body>
html>
- 径向渐变
径向渐变（Radial Gradients）：默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IT God Roadtitle>
<style>
#radial-gradient {
height: 200px;
background-color: red; /* 不支持径向的时候显示 */
background-image: radial-gradient(red, yellow, green);
}
#repeating-radial-gradient {
height: 200px;
background-color: red; /* 不支持径向的时候显示 */
background-image: repeating-radial-gradient(red, yellow 10%, green 15%); /* 指定渐变的起止颜色，由颜色值、停止位置（可选，使用百分比指定）组成。*/
}
style>
head>
<body>
<h3>径向渐变h3>
<p>从中心到外部的径向渐变。起点是红色，慢慢过渡到绿色：p>
<div id="radial-gradient">div>
<h3>重复径向渐变 - 指定角度h3>
<p>从中心到外部的重复径向渐变。p>
<div id="repeating-radial-gradient">div>
body>
html>
4. CSS3 字体
衬线体棱角分明，长文阅读比较舒服。无衬线比较简洁美观，适用于短句美感提升。
Serif 衬线字体，在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。衬线字体容易识别，它强调了每个字母笔画的开始和结束，因此易读性比较高，在整文阅读的情况下，适合使用衬线字体进行排版，易于换行阅读的识别性，避免发生行间的阅读错误。中文字体中的宋体就是一种最标准的衬线字体，衬线的特征非常明显。字形结构也和手写的楷书一致。因此宋体一直被做为最适合的正文字体。
Sans-serif 无衬线字体，在字的笔画开始、结束的地方没有额外的装饰，而且笔画的粗细差不多。适宜短篇幅的文字，或者有大量超链接的文本。移动设备上一般采用这种字体，因为像素排列对衬线不友好，必然会产生大量的锯齿和生硬的过渡。Helvetica是当今运用最广泛的无衬线字体。
真诚推荐 → 10款让人赏心悦目的无衬线英文字体
4.1 字体库格式
常见的字体文件后缀格式有TTF和OTF，以下是详细说明：
TTF（TrueType）是微软和Apple共同开发的字体，Windows 和 Mac 系统最常用的字体格式，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使得它们比基于矢量的字体更容易处理，保证了屏幕与打印输出的一致性。同时，这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。
OTF（OpenType）是微软和Adobe共同开发的字体，微软的IE浏览器全部采用这种字体。致力于替代TrueType字体，是 TTF 的升级版，而 OTF 是采用的是 PostScript 曲线，支持 OpenType 高级特性的更高级字体。
TTC（TrueType Collection）是 TrueType 字体集成文件(. TTC文件)，是在一单独文件结构中包含多种字体，以便更有效地共享轮廓数据，当多种字体共享同一笔画时，TTC 技术可有效地减小字体文件的大小。
- @font-face
当你要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IT God Roadtitle>
<style>
@font-face
{
font-family: aqua-font;
src: url(../static/font/aqua.ttf);
}
div
{
font-family:aqua-font;
font-size: 30px;
}
div.card {
width: 400px;
margin: auto;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
line-height: 80px;
height: 80px;
}
style>
head>
<body>
<div class="card">ABCDEFG abcdefgdiv>
body>
html>
5. CSS3 2D转换
CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。
- translate 平移
.translate {
transform: translate(50px,100px);/* 从左边元素移动50个像素，并从顶部移动100像素。 */
}
- rotate 旋转
.rotate {
transform: rotate(30deg); /* 元素顺时针旋转30度。负数为元素逆时针旋转。 */
}
- scale 缩放
.scale {
transform: scale(2, 3); /* 转变宽度为原来的大小的2倍，和其原始大小3倍的高度。 */
}
- skew 拉伸
.skew {
transform: skew(30deg, 20deg); /* 元素在X轴和Y轴上倾斜30度20度。 */
}
- matrix 矩阵
更多内容 → 博客园 - matrix()矩阵
.matrix {
transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0); /* matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。 */
}
6. CSS3 多列
可以将文本内容设计成像报纸一样的多列布局
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IT God Roadtitle>
<style>
.columns-3 {
column-count: 3;/* 文本分为 3 列 */
column-gap: 40px;/* 列与列间的间隙为 40 像素 */
column-rule: 1px solid red;/* 列与列间的边框的厚度，样式及颜色 */
}
style>
head>
<body>
<div class="columns-3">
多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例。
多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例。
多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例，多列示例。
div>
body>
html>
7. CSS3 模态弹框（Modal）
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IT God Roadtitle>
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgba(0, 0, 0, 0.9); /* opacity black */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
.modal-content {
width: 100%;
}
}
style>
head>
<body>
<h2>图片模态框h2>
<p>本实例演示了如何结合 CSS 和 JavaScript 来一起渲染图片。p>
<p>
首先，我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。
<p>
<p>然后，我们使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示：p>
<img id="myImg" src="//www.runoob.com/wp-content/uploads/2016/04/img_lights.jpg" alt="Northern Lights, Norway"
width="300" height="200">
<div id="myModal" class="modal">
<span class="close">×span>
<img class="modal-content" id="img01">
<div id="caption">div>
div>
<script>
// 获取模态窗口
const modal = document.getElementById('myModal');
// 获取图片模态框，alt 属性作为图片弹出中文本描述
const img = document.getElementById('myImg');
const modalImg = document.getElementById("img01");
const captionText = document.getElementById("caption");
img.onclick = function () {
modal.style.display = "block";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
// 获取 元素，设置关闭模态框按钮
const span = document.getElementsByClassName("close")[0];
// 点击 元素上的 (x), 关闭模态框
span.onclick = function () {
modal.style.display = "none";
}
script>
body>
html>
8. CSS3 图片滤镜
filter 属性定义了元素（通常是 img）的可视效果（例如：模糊与饱和度）。
- 语法
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
- Filter 函数
注意: 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。
通过 filter，一些浏览器为了提升性能会提供硬件加速。
| 函数 | 说明 |
|---|---|
| none | 默认值，没有效果 |
| blur(px) | 设置图像高斯模糊，默认是0 |
| brightness(%) | 设置图像亮度，0% 图像会全黑；100% 图像无变化；值可以超过100% 会更亮；默认值为 100% |
| contrast(%) | 调整图像的对比度，0% 图像会全黑；100% 图像无变化；值可以超过100% 会更亮；默认值为 100% |
| drop-shadow(h-shadow v-shadow blur spread color) | 设置图像阴影，阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本 |
| grayscale(%) | 将图像转换为灰度图像，值定义转换的比例。值为 100% 则完全转为灰度图像，值为 0% 图像无变化，默认值为 0 |
| hue-rotate(deg) | 给图像应用色相旋转，默认值是0deg |
| invert(%) | 反转输入图像，值定义转换的比例。100% 完全反转。值为 0% 图像无变化，值默认是0 |
| opacity(%) | 转化图像的透明程度，值定义转换的比例。值为 0% 是完全透明，值为 100%图像无变化 |
| saturate(%) | 转换图像饱和度，值定义转换的比例。值为 0% 完全不饱和，值为 100% 图像无变化，值默认是 100% |
| sepia(%) | 转换图像为深褐色，值定义转换的比例。值为 0% 图像无变化，值为 100% 图像完全是深褐色，值默认是 0% |
| url() | URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜 |
| initial | 设置属性为默认值 |
| inherit | 从父元素继承该属性 |
9. CSS3 弹性盒子
Flex Box 弹性盒子是 CSS3 的一种新的布局模式，当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex 将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。
弹性布局的主要思想是让容器有能力来改变项目的宽度和高度，以填满可用空间。
它的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式。浏览器会负责完成实际的布局。该布局模型在主流浏览器中都得到了支持。
- 弹性盒子实例
容器右向左，子元素纵向排列。容器高300px，子元素高100px，还有10px的外边距，使用了flex弹性盒子，容器会自动调整子元素的宽高，以适应布局。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IT God Roadtitle>
<style>
.flex-container {
display: flex;
width: 400px;
height: 300px;
background-color: lightgrey;
direction: rtl; /* 排列方向，默认为ltr左向右 */
flex-direction: column; /* 指定弹性子元素在父容器中的位置，column：纵向排列。 */
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
style>
head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1div>
<div class="flex-item">flex item 2div>
<div class="flex-item">flex item 3div>
<div class="flex-item">flex item 4div>
div>
body>
html>
- justify-content 属性
属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。默认为flex-start弹性项目向行头紧挨着填充。
- flex 居中
使用弹性盒子，居中变的很简单，只需要设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中。
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
margin: auto;
}
10. CSS3 多媒体
Media CSS2 中，针对不同媒体类型（显示器、便携设备、电视机，等等）可以定制不同的样式规则。CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想，取代了查找设备的类型，根据设置自适应显示。例如：viewport(视窗) 的宽度与高度；设备的宽度与高度；朝向 (智能手机横屏，竖屏) ；分辨率。
- 语法
not: 排除掉某些特定的设备的，比如 @media not print（非打印设备）。
only: 指定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。
all: 所有设备，这个应该经常看到。
@media not|only mediatype and (expressions) {
CSS 代码...;
}
- HTML页面中根据不同的设备加载不同的CSS文件
all: 用于所有多媒体类型设备。
print: 用于打印机。
screen: 用于电脑屏幕，平板，智能手机等。
speech: 用于屏幕阅读器。
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print2.css">
- 多媒体查询简单实例
/* 在屏幕可视窗口尺寸小于 480 像素的设备上修改背景颜色 */
@media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}
/* 在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧 */
@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left:216px;}
}
/* 在屏幕可视窗口尺寸小于 600 像素时将 div 元素隐藏 */
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
/* 在屏幕可视窗口尺寸520到699像素之间时将 div 元素隐藏 */
@media screen and (max-width: 699px) and (min-width: 520px) {
div.example {
display: none;
}
}
【每日一面】
不同元素垂直居中的方法
块元素 采用 flex 解决，用 margin:auto 。
行内元素（单行） 该元素 css 属性 line-height 的值与该元素的父级元素 css 属性 height 一致即可。
行内元素（多行） 设置该元素 css 属性：display: table-cell; vertical-align: middle; 还需设置该元素的父级元素 css 属性：display: table;。
