CSS高级教程

#rcorners1 {
  border-radius: 50px / 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

#rcorners3 {
  border-radius: 50%;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px;
}

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}

#example1 {
  background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

html {
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

div {
  transform: translate(50px, 100px);
}

/*顺时针旋转20度*/
div {
  transform: rotate(20deg);
}

元素增大为其原始宽度的两倍和其原始高度的三倍：

div {
  transform: scale(2, 3);
}

scaleX() 宽度，scaleY() 高度

skew() 方法

skew() 方法使元素沿 X 和 Y 轴倾斜给定角度。

skewX() 方法使元素沿 X 轴倾斜给定角度。

skewY() 方法使元素沿 Y 轴倾斜给定角度。

matrix() 方法

matrix() 方法把所有 2D 变换方法组合为一个。

matrix() 方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素。

参数如下：matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

3D转换

通过 CSS transform 属性，您可以使用以下 3D 转换方法：

• rotateX()
• rotateY()
• rotateZ()

rotateX() 方法

rotateX() 方法使元素绕其 X 轴旋转给定角度（这种是我想象中的，因为是3D的）

#myDiv {
  transform: rotateX(150deg);
}

rotateY() 方法

rotateY() 方法使元素绕其 Y 轴旋转给定角度：

rotateZ() 方法

rotateZ() 方法使元素绕其 Z 轴旋转给定角度：

过渡

这个更需要看实例：https://www.w3school.com.cn/css/css3_transitions.asp

• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function

指定过渡的速度曲线

transition-timing-function 属性规定过渡效果的速度曲线。

transition-timing-function 属性可接受以下值：

• ease – 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
• linear – 规定从开始到结束具有相同速度的过渡效果
• ease-in -规定缓慢开始的过渡效果
• ease-out – 规定缓慢结束的过渡效果
• ease-in-out – 规定开始和结束较慢的过渡效果
• cubic-bezier(n,n,n,n) – 允许您在三次贝塞尔函数中定义自己的值

延迟过渡效果

transition-delay 属性规定过渡效果的延迟（以秒计）。

动画

这个挺重要的！

https://www.w3school.com.cn/css/css3_animations.asp

动画和过渡的区别：https://zhuanlan.zhihu.com/p/145929287

其主要区别在于：transition需要触发一个事件才会随着时间改变其CSS属性；animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果。

1）动画不需要事件触发，过渡需要。

2）过渡只有一组（两个：开始-结束） 关键帧，动画可以设置多个。

属性	描述
@keyframes	规定动画模式。
animation	设置所有动画属性的简写属性。
animation-delay	规定动画开始的延迟。
animation-direction	定动画是向前播放、向后播放还是交替播放。
animation-duration	规定动画完成一个周期应花费的时间。
animation-fill-mode	规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。
animation-iteration-count	规定动画应播放的次数。
animation-name	规定 @keyframes 动画的名称。
animation-play-state	规定动画是运行还是暂停。
animation-timing-function	规定动画的速度曲线。

变量

var() 函数用于插入 CSS 变量的值。

var() 函数的语法如下：

var(name, value)

值	描述
name	必需。变量名（以两条破折号开头）。
value	可选。回退值（在未找到变量时使用）。

**注释：**变量名称必须以两个破折号（–）开头，且区分大小写！

var() 如何工作

首先：CSS 变量可以有全局或局部作用域。

全局变量可以在整个文档中进行访问/使用，而局部变量只能在声明它的选择器内部使用。

如需创建具有全局作用域的变量，请在 :root 选择器中声明它。 :root 选择器匹配文档的根元素。

如需创建具有局部作用域的变量，请在将要使用它的选择器中声明它。

下面的例子与上面的例子相同，但是在这里我们使用 var() 函数。

首先，我们声明两个全局变量（–blue 和 –white）。然后，我们使用 var() 函数稍后在样式表中插入变量的值：

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

body { background-color: var(--blue); }

h2 { border-bottom: 2px solid var(--blue); }

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

局部申明

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

body {
  background-color: var(--blue);
}

h2 {
  border-bottom: 2px solid var(--blue);
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  --blue: #0000ff;
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

在媒体查询中使用变量

https://www.w3school.com.cn/css/css3_variables_mediaqueries.asp

Flexbox

https://www.w3school.com.cn/css/css3_flexbox.asp

在 Flexbox 布局模块（问世）之前，可用的布局模式有以下四种：

• 块（Block），用于网页中的部分（节）
• 行内（Inline），用于文本
• 表，用于二维表数据
• 定位，用于元素的明确位置

弹性框布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。

父元素（容器）

通过将 display 属性设置为 flex，flex 容器将可伸缩：

.flex-container {
  display: flex;
}

以下是 flex 容器属性：

属性	描述
display	规定用于 HTML 元素的盒类型。
flex-direction	规定弹性容器内的弹性项目的方向。
justify-content	当弹性项目没有用到主轴上的所有可用空间时，水平对齐这些项目。
align-items	当弹性项目没有用到主轴上的所有可用空间时，垂直对齐这些项。（垂直对齐）
flex-wrap	规定弹性项目是否应该换行，若一条 flex 线上没有足够的空间容纳它们。
align-content	修改 flex-wrap 属性的行为。与 align-items 相似，但它不对齐弹性项目，而是对齐 flex 线。
flex-flow	flex-direction 和 flex-wrap 的简写属性。
order	规定弹性项目相对于同一容器内其余弹性项目的顺序。
align-self	用于弹性项目。覆盖容器的 align-items 属性。
flex	flex-grow、flex-shrink 以及 flex-basis 属性的简写属性。

justify-content

center 中心对齐

flex-start ：开头对齐

flex-end：末段对齐

space-around：有点两端对齐内味，space-around 值显示行之前、之间和之后带有空格的 flex 项目：

space-between：之间有空格，但是行首和行尾没有空格

完美居中

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

媒体查询

https://www.w3school.com.cn/css/css3_mediaqueries.asp

媒体查询语法

媒体查询由一种媒体类型组成，并可包含一个或多个表达式，这些表达式可以解析为 true 或 false。

@media not|only mediatype and (expressions) {
  CSS-Code;
}

如果指定的媒体类型与正在显示文档的设备类型匹配，并且媒体查询中的所有表达式均为 true，则查询结果为 true。当媒体查询为 true 时，将应用相应的样式表或样式规则，并遵循正常的级联规则。

除非您使用 not 或 only 运算符，否则媒体类型是可选的，且隐含 all 类型。

您还可以针对不同的媒体使用不同的样式表：

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3 媒体类型

值	描述
all	用于所有媒体类型设备。
print	用于打印机。
screen	用于计算机屏幕、平板电脑、智能手机等等。
speech	用于大声“读出”页面的屏幕阅读器。

响应式布局

视口：https://www.w3school.com.cn/css/css_rwd_viewport.asp

设置视口

HTML5 引入了一种方法，使 Web 设计者可以通过 <meta> 标签来控制视口。

您应该在所有网页中包含以下 <meta> 视口元素：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

它为浏览器提供了关于如何控制页面尺寸和缩放比例的指令。

width=device-width 部分将页面的宽度设置为跟随设备的屏幕宽度（视设备而定）。

当浏览器首次加载页面时，initial-scale=1.0 部分设置初始缩放级别。

下面分别是不带视口 meta 标签的网页、以及带视口 meta 标签的网页的例子：