东莞飞天网站设计公司_网页设计模板图片html_站长之家爱站网_seo关键词排名公司

CSS样式

在这里插入图片描述

CSS选择器

通用选择器
- 匹配HTML中的所有元素，一般用来清除HTML元素的默认的内外边距
```
* {margin: 0 auto;padding: 0;
}
```
标签选择器
- 通过具体标签名来匹配
```
p {color:red;
}
```
ID选择器
- 通过指定的ID属性来匹配，用#＋属性值
```
#nav{color:pink;
}
```
类选择器
- 通过指定class属性来匹配，用.＋属性值
```
.header{color:aqua;
}
```
```
div.header{color:black;
}
```
只匹配div.header的标签，对其他的.header标签没有影响

后代选择器

匹配标签的所有后代

div p{background:pink;
}

<!-- 父子关系 --><div><p>我是div中的标签</p></div><!-- 爷孙关系 --><div><section><p>我是div中section里面包含的p标签</p></section></div>
</body>

在这里插入图片描述

子代选择器

只匹配标签的直接后代

div > p{color:red;
}

<!-- 父子关系 --><div><p>我是div中的标签</p></div><!-- 爷孙关系 --><div><section><p>我是div中section里面包含的p标签</p></section></div>
</body>

在这里插入图片描述

相邻兄弟选择器
- 匹配元素后面紧挨着的元素，两个元素拥有同一个父级元素并且不存在嵌套关系。
```
div + p{color:black;
}
```
通用兄弟选择器
- 通用兄弟选择器同样会匹配同一父级元素下的兄弟元素，但兄弟元素之间无需紧邻。
```
div ~ p{font-size:16px;
}
```

分组选择器

div,p,.content{font-size:16px;font-weight:bold;
}

属性选择器
- 属性选择器用来匹配具有特定属性的元素。
```
input[type="text"]{color: blue;
}
```
input[type=“text”]选择器会匹配所有具有type="text"属性的标签。

属性选择器中方括号[ ]内的属性信息还支持以下几种写法：
- [target]：选择所有带有target属性元素；
- [target=_blank]：选择所有具有target="_blank" 属性的元素；
- [title~=flower]：选择title属性包含单词“flower”的所有元素；
- [lang|=en]：选择lang属性正好是“en”或以“en”为开头的所有元素。

CSS颜色设置

颜色名称

颜色	颜色名	颜色	颜色名	颜色	颜色名
天蓝	aqua	浅绿	lime	红色	red
蓝色	blue	深蓝	navy	蓝绿色	teal
灰色	gray	橙色	orange	黄色	yellow
黑色	black	品红	fuchsia	绿色	green
紫红色	maroon	橄榄色	olive	紫色	purplse
	silver	白色	white

颜色设置

值	描述	实例
颜色名称	使用颜色名称来具体设置颜色	color:red;
十六进制	使用十六进制码以#RRGGBB或#RGB的形式具体设置颜色	color:#ff0
RGB	通过 rgb() 函数对 red、green、blue 三原色的强度进行控制，从而实现不同的颜色	color: rgb(255,0,51);
RGBA	RGBA 扩展了 RGB，在 RGB 的基础上增加了 alpha 通道来设置颜色的透明度，需要使用 rgba() 函数实现	color: rgba(255,0,0,0.1);
HSL	通过 hsl() 函数对颜色的色调、饱和度、亮度进行调节，从而实现不同的颜色	color: hsl(120,100%,25%);
HSLA	HSLA 扩展了 HSL，在 HSL 的基础上增加了 alpha 通道来设置颜色的透明度，需要使用 hsla() 函数实现	置颜色的透明度，需要使用 hsla() 函数实现

CSS背景(background)

background-color：设置元素的背景颜色；
- 颜色设置
- transparent 透明色
background-image：设置元素的背景图像；
- url(‘图像路径’)
- none 默认值，不显示背景图像
background-repeat：控制背景图像是否重复；
- repeat 默认值，背景图像将在垂直方向和水平方向重复
- repeat-x 背景图像仅在水平反向上重复
- repeat-y 背景图像仅在垂直方向上重复
- no-repeat 背景图像仅显示一次，不在任何方向上重复
background-attachment：控制背景图像是否跟随窗口滚动；
- csroll 默认值，背景图像随着页面元素的滚动而移动
- fixed 当页面的其余部分滚动时，背景图像固定不动
background-position：控制背景图像在元素中的位置；
background-size：设置背景图像的尺寸；
background-origin：设置 background-position 属性相对于什么位置来定位背景图像；
- padding-box 相对于元素的内边距区域来定位背景图像
- border-box 相对于元素的边框区域来定位背景图像
- content-box 相对于元素的内容区域来定位背景图像
background-clip：设置背景图像的显示区域；
- border-box 默认值，在元素边框及一杯的区域显示背景图像
- padding-box 在元素内边距及以内的区域显示背景图像
- content-box 在元素内容区域显示背景图像
background：背景属性的缩写，可以在一个声明中设置所有的背景属性
- 每个属性之间使用空格进行分隔；
- 如果同时设置 background-position 和 background-size 属性，这两个属性之间需要使用斜线/分隔，并且需要遵循 background-position 属性在前 background-size 属性在后的顺序；
- 如果同时设置 background-origin 和 background-clip 属性，需要遵循 background-origin 属性在前 background-clip 属性在后的顺序。如果 background-origin 与 background-clip 属性的值相同，则可以只设置一个值。

CSS字体样式(font)

font-family：设置字体；
font-style：设置字体的风格，例如倾斜、斜体等；
- normal 默认值，文本以正常字体显示
- italic 文本以斜体显示
- oblique 文本倾斜显示
font-weight：设置字体粗细；
- normal 默认值，标准字体
- bold 粗体字体
- bolder 更粗体字体
- lighter 更细字体
font-size：设置字体尺寸；
font-variant：将小写字母转换为小型大写字母；
- normal 默认值，标准字体
- small-caps 将文本中的小写英文字母转换为小型大写字母
font-stretch：对字体进行伸缩变形（使用较少，并且主流浏览器都不支持）；
font：字体属性的缩写，可以在一个声明中设置多个字体属性。
- 使用 font 属性时必须按照如上所示的顺序，并且 font-size 和 font-family 两个属性不可忽略；
- font 属性中的每个参数仅允许设置一个值，除 font-size 和 font-family 属性外，被忽略的属性将被设置为各自的默认值；
- 若要定义 line-height 属性，则需要使用斜线/将 font-size 和 line-height 属性分开。

CSS文本格式化(text)

text-align：设置文本的水平对齐方式；
- left 默认值，左对齐
- right 右对齐
- center 居中对齐
- justify 两端对齐
text-decoration：设置文本的装饰；
- none 默认值，标准文本，没有额外修饰。
- underline 在文本下方添加一条下划线
- overline 在文本上方添加一条上划线
- line-through 在文本中间添加一条贯穿线
- blink 定义闪烁的文本
text-transform：设置文本中英文的大小写转换方式；
- none 默认值，以原文显示。
- capitalize 将文本中的每个单词更改为以大写字母开头的形式
- uppercase 将文本中的英文字母全部更改为大写
- lowercase 将文本中的英文字母全部更爱为小写
text-indent：设置文本的缩进方式；
- length 以固定的值加单位缩进
line-height：设置行高；
- normal 默认值，使用默认行高
- 具体数值
letter-spacing：设置字符间距；
- normal 默认值，表示字符之间咩有额外的间距
- 具体数值
word-spacing：设置单词与单词之间的间距（对中文无效）；
- normal 默认值，表示单词与单词之间没有额外的间距
- 具体数值
text-shadow：设置文本阴影；
- h-shadow：必填值，设置阴影的水平位置，允许为负值；
- v-shadow：必填值，设置阴影的垂直位置，允许为负值；
- blur：可选值，设置模糊的距离；
- color：可选值，设置阴影的颜色。

vertical-align：设置文本的垂直对齐方式；

baseline 默认值，将元素的基线与父元素的基线对齐
sub 下标对齐，将元素的基线相对于父元素的基线降低
super 上标对齐，将元素的基线相对于父元素的基线升高
top 顶部对齐，将元素行内框的顶端与行框的顶端对齐
text-top 文本顶部对齐，把元素的顶端与父元素字体的顶端对齐
middle 居中对齐，通常使用在图片上，将图片垂直方向的中线与文本的中线（文字元素行内框的中线）对齐
bottom 底部对齐，将元素行内框的顶端与行框的底端对齐
text-bottom 文本底部对齐，是将元素行内框的底端与行框的底线对齐

顶线：中文汉字的上边沿；
中线：贯穿小写英文字母 x 中间的线；
基线：小写英文字母 x 的下边沿；
底线：中文汉字的下边沿；
内容区：指底线与顶线包裹的区域；
行高：包括内容区与以内容区为基础对称拓展的空白区域，我们称之为行高，也可以认为是相邻文本行基线间的距离；
行距：指相邻文本行间上一个文本行底线和下一文本行顶线之间的距离；
行内框：是一个浏览器渲染模型中的概念，无法显示出来，但是它又确实存在，它的高度与行高相同；
行框：同行内框类似的概念，行框是指本行的一个虚拟的矩形框，也是浏览器渲染模式中的一个概念。行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度）。

在这里插入图片描述

white-space：设置文本中空白的处理方式；
- normal 默认值，忽略文本中的空白
- pre 保留文本中的空白，类似于
```
标签
```
- nowrap 文本会子啊一行中显示，不会自动换行，直到遇到
  标签为止
- pre-wrap 保留文本中的空白，但是正常地进行换行
- pre-line 合并文本中的空白，但是保留换行符
direction：设置文本方向。
- ltr 默认值，文本按从左到右的方向输出
- rtl 文本按从右到左的方向输出

CSS链接样式

:link：定义普通或未访问链接的样式；
:visited：定义已经访问过链接的样式；
:hover：定义当鼠标经过或悬停在链接上时的样式；
:active：定义点击链接时的样式。

通过上面的四个伪类选择器，您可以像给普通文本定义样式那样，为链接定义任何想要的 CSS 样式，例如颜色、字体、背景、边框等。

注意：在定义四个伪类选择器时需要按照一定的顺序，一般情况下:hover必须位于:link和:visited之后，:active必须位于:hover之后。

在 Chrome、Firefox、Safari 等主流的 Web 浏览器中，都为链接定义了一套默认的样式，如果不专门为链接设置样式，浏览器则会使用默认的链接样式。

普通链接：带有下划线的蓝色文本；
已访问的链接：带有下划线的紫色文本；
点击链接时：带有下划线的红色文本；
经过或悬停在链接上时：链接的外观并没有变化，它将保持先前状态的颜色。

CSS边框样式(border)

border-style：设置边框的样式，例如实线、虚线等；

none 无边框
hidden 隐藏边框，与none类似
dotted 定义点状虚线边框
dashed 定义虚线边框
solid 定义实现边框
double 定义双实线边框

border-style 属性有多种不同的用法：
如果提供全部的四个参数，则会按照上、右、下、左的顺序分别设置边框四个边的样式；
如果提供三个参数，那么第一个参数会作用在上边框，第二个参数会作用在左、右两个边框上，第三个参数会作用在下边框上；
如果提供两个参数，那么第一个参数会作用在上、下两个边框上，第二个参数会作用在左、右两个边框上；
如果只提供一个参数，这个参数将同时作用在四个边框上。除了可以使用 border-style 属性设置元素的边框样式外，您还可以使用下面的属性分别设置元素上、下、左、右四个边框的样式：
border-bottom-style：设置下边框的样式；
border-top-style：设置上边框的样式；
border-left-style：设置左边框的样式；
border-right-style：设置右边框的样式。

border-width：设置边框的宽度（厚度）；

thin 定义较细的边框
medium 默认值，定义中等宽度的边框
thick 定义较粗的边框
具体数值

同 border-style 属性相同，border-width 属性同样支持多种不同的用法：
如果提供全部的四个参数，则会按照上、右、下、左的顺序分别设置边框四个边的宽度；
如果提供三个参数，那么第一个参数会作用在上边框，第二个参数会作用在左、右两个边框上，第三个参数会作用在下边框上；
如果提供两个参数，那么第一个参数会作用在上、下两个边框上，第二个参数会作用在左、右两个边框上；
如果只提供一个参数，这个参数将同时作用在四个边框上。除了可以使用 border-width 属性设置元素的边框宽度外，您还可以使用下面的属性分别设置元素上、下、左、右四个边框的宽度：
border-bottom-width：设置下边框的宽度；
border-top-width：设置上边框的宽度；
border-left-width：设置左边框的宽度；
border-right-width：设置右边框的宽度。

border-color：设置边框的颜色；

具体颜色
transparent 默认值，透明色

同 border-style 属性相同，border-color 属性同样支持多种不同的用法：
如果提供全部的四个参数，则会按照上、右、下、左的顺序分别设置边框四个边的颜色；
如果提供三个参数，那么第一个参数会作用在上边框，第二个参数会作用在左、右两个边框上，第三个参数会作用在下边框上；
如果提供两个参数，那么第一个参数会作用在上、下两个边框上，第二个参数会作用在左、右两个边框上；
如果只提供一个参数，这个参数将同时作用在四个边框上。除了可以使用 border-color 属性设置元素的边框颜色外，您还可以使用下面的属性分别设置元素上、下、左、右四个边框的颜色：
border-bottom-color：设置下边框的颜色；
border-top-color：设置上边框的颜色；
border-left-color：设置左边框的颜色；
border-right-color：设置右边框的颜色。

border：上面三个边框属性的缩写。
- 除了可以使用 border 属性统一设置边框的宽度、样式、颜色外，您还可以使用下面的属性分别设置元素上、下、左、右四个边框的宽度、样式、颜色：
  - border-bottom：统一设置下边框的宽度、样式、颜色；
  - border-top：统一设置上边框的宽度、样式、颜色；
  - border-left：统一设置左边框的宽度、样式、颜色；
  - border-right：统一设置右边框的宽度、样式、颜色。

CSS列表样式(list-style)

list-style-type：设置列表项前面标记的形状（外观）；

值	描述
none	无标记
disc	默认值，标记为实心圆
circle	将标记设置为空心圆
square	将标记设置为实心方块
decimal	将标记设置为数字
decimal-leading-zero	将标记设置为以 0 开头的数字标记，例如 01、02、03
lower-roman	将标记设置为小写罗马数字，例如 i、ii、iii、iv、v
upper-roman	将标记设置为大写罗马数字，例如 I、II、III、IV、V
lower-alpha	将标记设置为小写英文字母，例如 a、b、c、d、e
upper-alpha	将标记设置为大写英文字母，例如 A、B、C、D、E
lower-greek	将标记设置为小写希腊字母，例如 α、β、γ、δ、ε
lower-latin	将标记设置为小写拉丁字母，例如 a、b、c、d、e
upper-latin	将标记设置为大写拉丁字母，例如 A、B、C、D、E
hebrew	将标记设置为传统的希伯来编号
armenian	将标记设置为传统的亚美尼亚编号
georgian	将标记设置为传统的乔治亚编号
cjk-ideographic	将标记设置为中文数字，例如一、二、三、四、五
hiragana	将标记设置为日文平假名字符，例如あ、い、う、え、お
katakana	将标记设置为日文片假名字符，例如ア、イ、ウ、エ、オ
hiragana-iroha	将标记设置为日文平假名序号
katakana-iroha	将标记设置为日文片假名序号

list-style-position：设置标记和列表中文本之间的距离；
- inside 列表项前的标记放置在之后的文本以内，列表项中的文本会根据标记对齐
- outside 默认值，保持标记位于文本的左侧，列表项前的标记放置在文本以外，并且列表项中的文本不会根据标记对齐
list-style-image：使用图像代替默认的标记；
- url 图像路径
- none 默认值，不显示任何图像
list-style：统一设置上面的三个属性。

CSS外边距(margin)

margin-top：设置元素上方的外边距；
margin-bottom：设置元素下方的外边距；
margin-right：设置元素右侧的外边距；
margin-left：设置元素左侧的外边距；
margin：外边距的简写属性，可以同时设置元素四个方向（上下左右）的外边距。

CSS内边距(padding)

padding-top：设置元素内容区上方的内边距；
padding-right：设置元素内容区右侧的内边距；
padding-bottom：设置元素内容区下方的内边距；
padding-left：设置元素内容区左侧的内边距；
padding：内边距属性的缩写形式，可以同时设置上下左右四个方向上的内边距。

CSS滚动条样式(overflow)

处理溢出元素内容区的内容
- visible 默认值，对溢出的内容不做处理，内容会在元素内容区之外显示
- hidden 隐藏溢出元素内容区的内容
- scroll 隐藏溢出元素内容区的内容，并在元素的左侧和下方分别创建一个滚动条，通过滑动滚动条可以查看元素中的所有内容
- auto 如果出现内容溢出，则会在元素左侧创建一个滚动条，通过滑动滚动条可以查看元素中的全部内容

CSS元素可见性(visibility)

visibility 属性用来设置元素是否可见
- visible 默认值，表示元素是可见的
- hidden 隐藏元素
- collapse 主要用来隐藏表格的行和列，隐藏的行或列所占的空间可以被其他表格内容使用；如果在其他元素上使用，其效果等同于“hidden”
```
提示：visibility 属性虽然会隐藏元素，但会保留元素在页面中所占的空间。如果您希望元素隐藏的同时又不占用页面空间的话，请使用 display 属性。
```

CSS元素显示类型(display)

display 根据元素类型的不同，每个元素都有一个默认的 display 属性值
- none 隐藏元素
- block 将元素设置为块级元素
- inline-block 将元素设置为行内块元素
- flex 弹性伸缩盒

CSS定位(position)

position 属性用来设置元素在页面中的位置，通过该属性您可以把任何属性放置在任何您认为合适的位置

取值	说明
static	默认值，静态定位，表示没有定位，元素会按照正常的位置显示，此时 top、bottom、left 和 right 4 个定位属性也不会被应用。
relative	相对定位，即相对于元素的正常位置进行定位，您可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于正常位置的偏移量，在此过程中不会对其它元素造成影响。
absolute	绝对定位，相对于第一个非 static 定位的父级元素进行定位，可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于父级元素位置的偏移量。如果没有满足条件的父级元素，则会相对于浏览器窗口来进行定位。使用绝对定位的元素不会对其它元素造成影响。
fixed	固定定位，相对于浏览器的创建进行定位，可以使用 top、right、bottom、left 这 4 个属性来定义元素相对于浏览器窗口的位置。使用固定定位的元素无论如何滚动浏览器窗口元素的位置都是固定不变的。
sticky	粘性定位，它是 relative 和 fixed 的结合体，能够实线类似吸附的效果，当滚动页面时它的效果与 relative 相同，当要滚动到屏幕之外时则会自动变成 fixed 的效果。

CSS元素堆叠(z-index)

每个元素都有一个默认的 z-index 属性，将 z-index 属性与 position 属性相结合可以创建出类似 PhotoShop 中的图层效果。z-index 属性可以设置元素的层叠级别（当元素出现重叠时，该元素在其它元素之上还是之下），拥有更高层叠级别的元素会处于层叠级别较低的元素的前面（或者说上面）。

通过 z-index 属性您可以创建更加复杂的网页布局，z-index 属性的可选值如下表所示：

值	描述
auto	默认值，堆叠顺序与父元素相等
number	使用具体数值（整数）设置元素的堆叠顺序
inherit	从父元素继承 z-index 属性的值

关于元素的层级关系有以下几点需要注意：

对于未设置 position 属性的元素或者 position 属性的值为 static 时，后定义的元素会覆盖前面的元素；
对于设置有 position 属性且属性值不为 static 的元素，这些元素会覆盖没有设置 position 属性或者 position 属性值为 static 的元素；
对于 position 属性值不为 static 且定义了 z-index 属性的元素，z-index 属性值大的元素会覆盖 z-index 属性值小的元素，即 z-index 属性值越大优先级越高，若 z-index 属性值相同，则后定义的元素会覆盖前面定义的元素；
z-index 属性仅在元素定义了 position 属性且属性值不为 static 时才有效。

CSS浮动(float)

浮动

float 属性有三个可选值，如下表所示：

值	描述
left	元素向左浮动
right	元素向右浮动
none	默认值，元素不浮动
inherit	从父元素继承 float 属性的值

另外，在使用 float 属性时还需要注意以下几点：

如果设置了 float 属性且属性的值不为 none 时，若 display 属性的值为 inline-table，那么 display 实际会被设置为 table，若 display 的属性值为 inline、inline-block、run-in、table-* 等值，那么 display 实际会被设置为 block，其它情况则没有变化；
当元素设置了绝对定位或者 display 属性的值为 none 时，float 属性无效；
相邻的浮动元素，如果空间足够它们会紧挨在一起，排列成一行。

清除浮动clear

元素浮动之后，会对周围的元素造成一定的影响，为了消除这种影响您可以使用 clear 属性来清除浮动，属性的可选值如下：

值	描述
left	左侧不允许浮动元素
right	右侧不允许浮动元素
both	左右两侧均不允许浮动元素
none	默认值，允许浮动元素出现在左右两侧
inherit	从父元素继承 clear 属性的值

CSS伪类选择器

常用伪类选择器
- :hover 匹配鼠标悬停其上的元素
- :first-child 匹配父元素中的第一个子元素
- :last-child 匹配父元素中的最后一个子元素
- :nth-child(n) 匹配父元素中的选中的n元素

CSS伪元素

CSS 中提供了一系列的伪元素，如下表所示：

伪元素	例子	例子描述
::after	p::after	在每个元素之后插入内容
::before	p::before	在每个元素之前插入内容
::first-letter	p::first-letter	匹配每个元素中内容的首字母
::first-line	p::first-line	匹配每个元素中内容的首行
::selection	p::selection	匹配用户选择的元素部分
::placeholder	input::placeholder	匹配每个表单输入框（例如）的 placeholder 属性

CSS透明度(opacity)

CSS 中提供了一个 opacity 属性用来设置元素的透明度，它不仅对颜色有效，对图像或者页面中其它的元素也有效。其语法格式如下：

opacity: number;

其中 number 为一个 0~1 之间的浮点数（小数），用来表示元素的透明度，值越小则越透明（0 表示完全透明，1 表示完全不透明）。

另外，在使用 opacity 属性时，还需要注意以下几点：

当一个元素定义了 opacity 属性，并且其值小于 1 时，那么它的子元素也会拥有同样的透明度；
当一个元素定义了 opacity 属性，并且其值小于 1 时，将会重新定义该元素默认的 z-index 属性，如果其它的元素为非定位元素，那么该元素的堆叠级别将会高于其它元素；
如果定义的 opacity 属性值超过了指定的范围，那么则截取与之最相近的值，例如 1.5 将截取为 1。

CSS圆角(border-radius)

border-top-left-radius：为元素左上角设置圆角效果；
border-top-right-radius：为元素右上角设置圆角效果；
border-bottom-right-radius：为元素右下角设置圆角效果；
border-bottom-left-radius：为元素左下角设置圆角效果；
border-radius：上面四个属性的简写形式，可以同时为元素的四个角设置圆角效果

CSS边框图片(border-image)

通过语法可以看出 border-image 是 border-image-source、border-image-slice、border-image-width、border-image-outset 和 border-image-repeat 属性的简写，其中：

border-image-source：定义边框图像的路径；
border-image-slice：定义边框图像从什么位置开始分割；
border-image-width：定义边框图像的厚度（宽度）；
border-image-outset：定义边框图像的外延尺寸（边框图像区域超出边框的量）；
border-image-repeat：定义边框图像的平铺方式。

CSS渐变色

线性渐变
- 线性渐变指的是颜色沿一条直线进行渐变（例如右上到下，从左到右等），要创建线性渐变，您至少需要定义两个色标（色标指的是想要平滑过渡的颜色），若要创建更加复杂的渐变效果，则需要定义更多的色标。创建线性渐变的基本语法如下：
  
  linear-gradient(direction, color-stop1, color-stop2, …);
  
  参数说明如下：
  - direction 可选值，定义渐变的方向（例如从左到右，从上到下），可以是具体角度（例如 90deg），也可以通过 to 加 left、right、top、bottom 等关键字来表示渐变方向，例如：
    - to left：表示从右到左，相当于 270deg；
    - to right：表示从左到右，相当于 90deg；
    - to top：表示从下到上，相当于 0deg；
    - to bottom：默认值，表示从上到下，相当于 180deg；
    - to right bottom：表示从左上到右下；
    - to right top：表示从左下到右上；
    - to left bottom：表示从右上到左下；
径向渐变

径向渐变与线性渐变类型，不同之处在于径向渐变是由中心向外延申的渐变，您可以指定中心点的位置，也可以设置渐变的形状。定义径向渐变的基本语法如下所示：

radial-gradient(shape size at position, color-stop1, color-stop2, …);

参数说明如下：
- at：一个关键字，需要放置在参数 position 的前面；
- position：指定渐变起点的坐标，您可以使用数值加单位、百分比或者关键字（例如 left、bottom 等）等形式指定渐变起点的坐标，如果提供 2 个参数，那么第一个参数用来表示横坐标，第二个参数用来表示纵坐标，如果只提供一个参数，那么第二个参数将被默认设置为 50%，即 center；
- shape：指定渐变的形状，可选值为 circle（圆形）、ellipse（椭圆）；
- size：指定渐变形状的大小，除了可以使用具体的数值来指定 circle、ellipse 的半径外，还可以使用下面所示的关键字来指定渐变形状的大小：
  - closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边；
  - closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角；
  - farthest-side：默认值，指定径向渐变的半径长度为从圆心到离圆心最远的边；
  - farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角。
- color-stop1、color-stop2、…：表示定义的多个色标，在每个色标中除了可以定义颜色外，还可以通过数值加单位或者百分比的形式定义颜色的起止位置。

CSS阴影效果

text-shadow
- 使用 CSS 的 text-shadow 属性我们可以为文本设置阴影效果，属性的语法格式如下：
  
  text-shadow: offset-x offset-y blur color;
  
  语法说明如下：
  - offset-x：必填参数，设置阴影的水平偏移量，可以为负值；
  - offset-y：必填参数，设置阴影的垂直偏移量，可以为负值；
  - blur：可选参数，设置模糊的半径，值越大，模糊越大，阴影的边缘越模糊，不允许使用负值；
  - color：可选参数，设置阴影的颜色，如果省略或未指定该值，则采用 color 属性的值。
  提示：使用 text-shadow 属性可以同时设定多组阴影效果，每组之间使用逗号分隔，定义的多组阴影效果会按照定义顺序依次罗列，第一个阴影在最上面，以此类推。另外，若要取消文本的阴影效果则可以将 text-shadow 属性的值设置为 none。
box-shadow
- 使用 CSS 的 box-shadow 属性我们可以为 HTML 元素设置阴影效果，属性的语法格式如下：
  
  box-shadow: h-shadow v-shadow blur spread color inset;
  
  语法说明如下：
  - h-shadow：必填参数，设置阴影水平方向的偏移量，可以为负值；
  - v-shadow：必填参数，设置阴影垂直方向的偏移量，可以为负值；
  - blur：可选参数，设置模糊的半径，值越大，模糊越大，阴影的边缘越模糊，不允许使用负值；
  - spread：可选参数，设置阴影的尺寸；
  - color：可选参数，设置阴影的颜色；
  - inset：可选参数，将默认的外部阴影 (outset) 改为内部阴影。
  提示：与 text-shadow 属性相似，box-shadow 属性也可以同时设定多组阴影效果，每组之间使用逗号分隔，定义的多组阴影效果会按照定义顺序依次罗列，第一个阴影在最上面，以此类推。

CSS改变盒子模型(box-sizing)

box-sizing 属性的可选值如下：

值	描述
content-box	默认值，元素的实际宽度或高度等于元素内容区的宽度或高度、内边距和边框的和
border-box	在元素的内容区内绘制内边距或边框，内边距或边框不会影响元素的实际宽度或高度
inherit	从父元素继承 box-sizing 属性的值。

CSS弹性布局(flex)

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称“项目”。容器默认存在两根轴，分别为水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。如下图所示：

图：Flex 容器

提示：您可以通过将元素的 display 属性设置为 flex（生成块级 flex 容器）或 inline-flex（生成类似 inline-block 的行内块级 flex 容器）。当一个元素设置了 Flex 布局以后，其子元素的 float、clear 和 vertical-align 等属性将失效。

CSS 中提供了以下属性来实现 Flex 布局：

属性	描述
display	指定 HTML 元素的盒子类型
flex-direction	指定弹性盒子中子元素的排列方式
flex-wrap	设置当弹性盒子的子元素超出父容器时是否换行
flex-flow	flex-direction 和 flex-wrap 两个属性的简写
justify-content	设置弹性盒子中元素在主轴（横轴）方向上的对齐方式
align-items	设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式
align-content	修改 flex-wrap 属性的行为，类似 align-items，但不是设置子元素对齐，而是设置行对齐
order	设置弹性盒子中子元素的排列顺序
align-self	在弹性盒子的子元素上使用，用来覆盖容器的 align-items 属性
flex	设置弹性盒子中子元素如何分配空间
flex-grow	设置弹性盒子的扩展比率
flex-shrink	设置弹性盒子的收缩比率
flex-basis	设置弹性盒子伸缩基准值

按照作用范围的不同，这些属性可以分为两类，分别为容器属性（flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content）和项目属性（order、align-self、flex、flex-grow、flex-shrink、flex-basis）。下面就来介绍一下这些属性的使用。

1) flex-direction

flex-direction 属性用来决定主轴的方向（即项目的排列方向），属性的可选值如下：

值	描述
row	默认值，主轴沿水平方向从左到右
row-reverse	主轴沿水平方向从右到左
column	主轴沿垂直方向从上到下
column-reverse	主轴沿垂直方向从下到上
initial	将此属性设置为属性的默认值
inherit	从父元素继承此属性的值

2) flex-wrap

flex-wrap 属性用来设置当弹性盒子的子元素（项目）超出父容器时是否换行，属性的可选值如下：

值	描述
nowrap	默认值，表示项目不会换行
wrap	表示项目会在需要时换行
wrap-reverse	表示项目会在需要时换行，但会以相反的顺序
initial	将此属性设置为属性的默认值
inherit	从父元素继承属性的值

3) flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 两个属性的简写，语法格式如下：

flex-flow: flex-direction flex-wrap;

4) justify-content

justify-content 属性用于设置弹性盒子中元素在主轴（横轴）方向上的对齐方式，属性的可选值如下：

值	描述
flex-start	默认值，左对齐
flex-end	右对齐
center	居中
space-between	两端对齐，项目之间的间隔是相等的
space-around	每个项目两侧的间隔相等
initial	将此属性设置为属性的默认值
inherit	从父元素继承属性的值

5) align-items

align-items 属性用来设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式，属性的可选值如下：

值	描述
stretch	默认值，项目将被拉伸以适合容器
center	项目位于容器的中央
flex-start	项目位于容器的顶部
flex-end	项目位于容器的底部
baseline	项目与容器的基线对齐
initial	将此属性设置为属性的默认值
inherit	从父元素继承属性的值

6) align-content

align-content 属性与 justify-content 属性类似，可以在弹性盒子的侧轴还有多余空间时调整容器内项目的对齐方式，属性的可选值如下：

值	描述
stretch	默认值，将项目拉伸以占据剩余空间
center	项目在容器内居中排布
flex-start	项目在容器的顶部排列
flex-end	项目在容器的底部排列
space-between	多行项目均匀分布在容器中，其中第一行分布在容器的顶部，最后一行分布在容器的底部
space-around	多行项目均匀分布在容器中，并且每行的间距（包括离容器边缘的间距）都相等
initial	将此属性设置为属性的默认值
inherit	从父元素继承该属性的值

align-content 属性与 justify-content 属性类似，可以在弹性盒子的侧轴还有多余空间时调整容器内项目的对齐方式，属性的可选值如下：

值	描述
stretch	默认值，将项目拉伸以占据剩余空间
center	项目在容器内居中排布
flex-start	项目在容器的顶部排列
flex-end	项目在容器的底部排列
space-between	多行项目均匀分布在容器中，其中第一行分布在容器的顶部，最后一行分布在容器的底部
space-around	多行项目均匀分布在容器中，并且每行的间距（包括离容器边缘的间距）都相等
initial	将此属性设置为属性的默认值
inherit	从父元素继承该属性的值