css3

# 新增选择器

# 属性选择器

选择器	说明
E[attr^=“xxx”]	选择元素 E，其中 E 元素的 attr 属性是以 xxx 开头的任何字符
E[attr$=“xxx”]	选择元素 E，其中 E 元素的 attr 属性是以 xxx 结尾的任何字符
E[attr*=“xxx”]	选择元素 E，其中 E 元素的 attr 属性是包含 xxx 的任何字符

# 子元素伪类选择器

# 父元素下的某子元素

必须满足选定的元素为 E 类型

选择器	说明
E:first-child	选择父元素下的第一个子元素（该子元素类型为 E，以下类同）
E:last-child	选择父元素下的最后一个子元素
E:nth-child(n)	选择父元素下的第 n 个子元素或奇偶元素，n 取值有 3 种：数字、odd 和 even，其中 n 从 1 开始
E:only-child	选择父元素下唯一的子元素，该父元素只有一个子元素

ul li:first-child {
  background-color: red;
}
ul li:nth-child(2) {
  background-color: orange;
}
ul li:nth-child(3) {
  background-color: yellow;
}
ul li:nth-child(4) {
  background-color: green;
}
ul li:last-child {
  background-color: blue;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 批量选择元素

1.选择前几个元素

/*【负方向范围】选择第1个到第6个 */
:nth-child(-n + 6) {
}

1
2
3

2.从第几个开始选择

/*【正方向范围】选择从第6个开始的 */
:nth-child(n + 6) {
}

1
2
3

3.两者结合使用，可以限制选择某一个范围

/*【限制范围】选择第6个到第9个，取两者的交集【感谢小伙伴的纠正~】 */
:nth-child(-n + 9):nth-child(n + 6) {
}

1
2
3

# 父元素下某类型中的某元素

相比其上面那一类，其必须是在选定的元素类型中进行选择

选择器	说明
E:first-of-type	选择父元素下的第一个 E 类型的子元素
E:last-of-type	选择父元素下的最后一个 E 类型的子元素
E:nth-of-type(n)	选择父元素下的第 n 个 E 类型的子元素或奇偶元素，n 取值有 3 种：数字、odd 和 even，n 从 1 开始
E:only-of-type	选择父元素下唯一的 E 类型的子元素，该父元素可以有多个子元素

/* 选择最后两个元素 */
:nth-last-of-type(-n+2) {
  margin-bottom: 0;
}

1
2
3
4

# UI 伪类选择器

选择器	说明
:focus	获取焦点
::selection	文本被选中时
:checked	选框被选中时
:enabled	元素可用时的状态
:disabled	元素被禁用时的状态
:read-write	文本元素可读写时的状态
:read-only	文本元素只读状态

# 其他伪类选择器

选择器	说明
:root	选择 HTML 页面的根元素
:empty	选择一个空元素（即 innerHTML 为空）
:target	被当做锚点的元素被点击时
:not()	选取某元素外的所有元素

其中：not()选择器在实际开发中十分重要，如下为选择 ul 中除.first外的所有 li 元素

<style type="text/css">
        *{padding:0;margin:0;}
        ul{list-style-type:none;}
        ul li:not(.first)
        {
            color:red;
        }
</style>
<body>
    <ul>
        <li class="first">文字一</li>
        <li>文字二/li>
        <li>文字三</li>
        <li>文字四</li>
    </ul>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 文本样式

# 常用文本样式简介

属性	说明
text-shadow	文本阴影
text-stroke	文本描边
text-overflow	文本溢出
word-wrap	强制换行
@font-face	嵌入字体

# text-shadow（阴影效果）

语法：

text-shadow: x-offset y-offset blur color;

其中 4 个属性分别为“水平阴影”，“垂直阴影”，“模糊距离”，“阴影颜色”

技巧：同时为同一个元素定义多个阴影来实现凹凸效果等

# text-stroke（文本描边）

所谓描边可以理解为给文字加上边框

语法：

text-stroke: width color;

其中 2 个属性分别为“边框宽度”，“边框颜色”

技巧：可以将文字颜色定义为透明实现镂空效果

# text-overflow（文字溢出效果）

语法：

text-overflow: 取值;

取值有两种：

属性值	说明
ellipsis	当文本溢出时，显示省略号，并且隐藏多余的文字
clip	当文本溢出时，不显示省略号，而是将溢出的文字裁切掉

实际上，单独使用 text-overflow 属性是无法得到省略号效果的。固定搭配为：

/*让长段文本不换行*/
white-space: nowrap;
/*设置文本超出元素宽度部分隐藏*/
overflow-x: hidden;
/*设置文本超出部分用省略号显示*/
text-overflow: ellipsis;

1
2
3
4
5
6

多行超出省略号

/*让纯数字也可以换行显示*/
word-break: break-all;
/*将div变成弹性伸缩盒子模型
			  display:box为display:flex的前身
			  需要加浏览器私有属性来支持
			*/
display: -webkit-box;
/*设置或检索伸缩盒的子元素的排列方式
			  目前所有主流浏览器都不支持box-orient属性。
			  Firefox通过私有属性- MOZ-box-orient支持。
			  Safari, Opera, 和 Chrome通过
			  私有属性 -webkit-box-orient 支持.
			*/
/*值为vertical表示从顶部向底部垂直布置子元素*/
-webkit-box-orient: vertical;
/*设置要出现省略号的行数
			  下面的3表示第三行出现省略号
			*/
-webkit-line-clamp: 3;
/*设置一个行高，更容易控制行数
			  行高/元素高度=设置出现省略号的行数
			  然后超出的部分隐藏起来  
			*/
line-height: 30px;
/*超出高度的部分都隐藏起来
			  目的主要是将设置了省略号那一行后面的内容都隐藏起来  
			*/
overflow-y: hidden;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# word-wrap、word-break（强制换行，只针对英文）

语法：

word-wrap:取值;

或

word-break:取值;

说明：

word-wrap 属性只有 2 个取值，如下表所示。

断句时会尝试把超出单词移到下一行

属性值	说明
normal	自动换行（默认值）
break-word	强制换行

word-break 属性有 3 个取值，如下表所示。

断句时直接截断单词

属性值	说明
normal	自动换行（默认值）
break-all	允许在单词内换行
keep-all	只能在半角空格或连字符处换行

一般情况下，我们只会用到word-wrap:break-word;或word-break:break-all这两个来实现强制换行，其他属性值不需要去了解。

# @font-face（嵌入字体）

语法：

@font-face {
  font-family: 字体名称;
  src: url(文件路径);
}

1
2
3
4

说明：

font-family 属性用于定义字体的名称，src 属性中的“文件路径”指的是服务器端中字体文件的路径

@font-face 不仅可以用于安装某一种字体。同样可以用来实现字体图标技术。但不建议用来安装中文字体，因为中文字体往往 10MB 以上，太大了。

# 颜色样式

# opacity（透明度）

语法：

opacity: 数值;

说明：

opacity 属性取值是一个数值，取值范围为 0.0~1.0。其中 0.0 表示完全透明，1.0 表示完全不透明。

注意，opacity 属性不仅作用于元素的背景颜色，还会作用于内部所有子元素以及文本内容。

# RGBA 颜色

语法：

rgba(R, G, B, A)

说明：

R，指的是红色值（Red）；G，指的是绿色值（Green）；B，指的是蓝色值（Blue）；A，指的是透明度（Alpha）。

# CSS3 颜色渐变

# 线性渐变（按方向渐变）

语法：

background: linear-gradient(方向, 开始颜色, ...(可添加过渡色), 结束颜色);

说明：

线性渐变的“方向”取值有两种:一种是使用角度（单位为 deg）;另外一种是使用关键字，如下表所示。

属性值	对应角度	说明
to top	0deg	从下到上
to bottom	180deg	从上到下（默认值）
to left	270deg	从右到左
to right	90deg	从左到右
to top left	无	从右下角到左上角（斜对角）
to top right	无	从左下角到右上角（斜对角）

特别注意一点，线性渐变使用的是background属性，而不是background-color属性。如果使用 background-color 属性，则无效。

# 径向渐变（按圆心直径渐变）

语法：

background: radial-gradient(position, shape size, start-color, stop-color);

说明：

position 用于定义圆心位置。shape size 用于定义形状大小，由两部分组成，shape 定义形状，size 定义大小。start-color 和 stop-color 分别用于定义开始颜色和结束颜色。

其中，position 和 shape size 都是可选参数。如果省略，则表示采用默认值。start-color 和 stop-color 都是必选参数，可以有多个颜色值。

参数 shape 取值

属性值	说明
ellipse	椭圆形（默认值）
circle	圆形

参数 size 取值

属性值	说明
closest-side	指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner	指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side	指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner	指定径向渐变的半径长度为从圆心到离圆心最远的角

# 边框样式

# border-radius（圆角效果）

语法：

border-radius: 取值;

说明：

border-radius 属性取值是一个长度值，单位可以是 px、em 和百分比等。

取值共有 4 个分别代表 4 个角（从左上角顺时针），类似 border、padding、margin 等属性，属性值也可以缩写。

# 实现椭圆效果

语法：

border-radius: x/y;

说明：

x 表示圆角的水平半径，y 表示圆角的垂直半径。而之前的取值其实默认表示水平半径与垂直半径相等

div {
  width: 160px;
  height: 100px;
  border: 1px solid gray;
  border-radius: 80px/50px;
}

1
2
3
4
5
6

# box-shadow（边框阴影）

语法：

box-shadow: x-offset y-offset blur spread color style;

说明：

box-shadow 属性的每一个参数说明如下。

（1）x-offset：定义水平阴影的偏移距离，可以使用负值。由于 CSS3 采用的是 W3C 坐标系，因此 x-offset 取值为正时，向右偏移；取值为负时，向左偏移。
（2）y-offset：定义垂直阴影的偏移距离，可以使用负值。由于 CSS3 采用的是 W3C 坐标系，因此 y-offset 取值为正时，向下偏移；取值为负时，向上偏移。
（3）blur：定义阴影的模糊半径，只能为正值。
（4）spread：定义阴影的大小。
（5）color：定义阴影的颜色。
（6）style：定义是外阴影还是内阴影。

同时我们可以使用 box-shadow 属性为 4 个方向的边框定义独立的阴影效果。

语法：

box-shadow: 左阴影, 上阴影, 下阴影, 右阴影;

# border-colors（多色边框）

语法：

border-top-colors: 颜色值;
border-right-colors: 颜色值;
border-bottom-colors: 颜色值;
border-left-colors: 颜色值;

1
2
3
4

说明：

border-colors 属性兼容性很差，如果边框宽度（即 border-width）为 n 个像素，则该边框可以使用 n 种颜色，即每像素显示一种颜色。

多色边框实现的渐变边框：

# border-image（边框背景）

语法：

border-image: url() px px px px repeat;

说明：

border-image 属性需要定义 3 个方面的内容。

（1）图片路径。
（2）图片的切割宽度：四条边的切割宽度，依次为上边、右边、下边、左边（顺时针）。
（3）平铺方式：有 3 种取值，分别为 repeat、round 和 stretch。

1）取值为 repeat 时，表示 4 条边的小方块会不断重复，超出元素部分将会被剪切掉。

2）取值为 round 时，表示 4 条边的小方块会铺满。为了铺满，边框图片会压缩或拉伸。

3）取值为 stretch 时，表示 4 条边的小方块会拉伸，边长有多长就拉多长。

# 背景样式

# background-size（背景大小）

语法：

background-size: 取值;

说明：

background-size 属性取值有两种：一种是长度值，如 px、em、百分比等；另外一种是使用关键字，如下表所示。

属性值	说明
cover	即“覆盖”，表示将背景图片等比缩放来填满整个元素
contain	即“容纳”，表示将背景图片等比缩放至某一边紧贴元素边沿为止

注意，背景图片跟普通图片（即 img 标签）是不同的东西！width 和 height 这两个属性只能用来定义 img 标签图片的大小，是不能用于控制背景图片的大小。

# background-origin（背景位置）

语法：

background-origin: 取值;

说明：

background-origin 属性取值有 3 种，如下表所示。

属性值	说明
border-box	从边框开始平铺
padding-box	从内边距开始平铺（默认值）
content-box	从内容区开始平铺

# background-clip（背景剪切）

超出部分被剪切掉

语法：

background-clip: 取值;

说明：

background-clip 属性取值有 3 个，如下表所示。

属性值	说明
border-box	从边框开始剪切（默认值）
padding-box	从内边距开始剪切
content-box	从内容区开始剪切

# CSS3 变形 transform

# translate()（平移）

语法：

transform: translateX(x); /*沿X轴方向平移*/
transform: translateY(y); /*沿Y轴方向平移*/
transform: translate(x, y); /*沿X轴和Y轴同时平移*/

1
2
3

说明：

一般结合 css3 动画一起使用。

# scale()（缩放）

语法：

transform: scaleX(x); /*沿X轴方向缩放*/
transform: scaleY(y); /*沿Y轴方向缩放*/
transform: scale(x, y); /*沿X轴和Y轴同时缩放*/

1
2
3

说明：

当 x 或 y 取值为 0~1 之间时，元素进行缩小；当 x 或 y 取值大于 1 时，元素进行放大。

# skew()（倾斜）

语法：

transform: skewX(x); /*沿X轴方向倾斜*/
transform: skewY(y); /*沿Y轴方向倾斜*/
transform: skew(x, y); /*沿X轴和Y轴同时倾斜*/

1
2
3

说明：

参数 x 表示元素在 x 轴方向的倾斜度数，单位为 deg（即 degree 的缩写）。如果度数为正，则表示元素沿 x 轴方向逆时针倾斜；如果度数为负，则表示元素沿 x 轴方向顺时针倾斜。

# rotate()（旋转）

语法：

transform: rotate(angle);

说明：

参数 angle 表示元素相对于中心原点旋转的度数，单位为 deg。如果度数为正，则表示顺时针旋转；如果度数为负，则表示逆时针旋转。

# transform-origin（中心原点）

默认情况下，CSS3 的各种变形（平移、缩放、倾斜等）都是以元素的中心原点进行变形的。

我们可以使用 transform-origin 属性来改变元素的中心原点。

语法：

transform-origin: 取值;

说明：

transform-origin 属性取值有两种：一种是“长度值”；另外一种是“关键字”。当取值为长度值时，单位可以为 px、em 和百分比等。当取值为关键字时，这个跟 background-position 属性取值是相似的

# CSS3 过渡 transition

将元素的某一个属性从“一个属性值”在指定的时间内平滑地过渡到“另一个属性值”，从而来实现动画效果

语法：

transition: 过渡属性 过渡时间 过渡方式 延迟时间;

transition 是一个复合属性，主要包括 4 个子属性，如下表所示。

属性	说明
transition-property	对元素的哪一个属性进行操作（css 的某个属性，一般为 all）
transition-duration	过渡的持续时间
transition-timing-function	过渡的速率方式
transition-delay	过渡的延迟时间（可选参数）

凡是涉及 CSS3 过渡，我们一般都是结合 :hover 伪类，来实现过渡效果。

# CSS3 动画 animation

语法：

animation: 动画名称 持续时间 动画方式 延迟时间 动画次数 动画方向;

animation 是一个复合属性，主要包括 6 个子属性，如下表所示。

属性	说明
animation-name	对哪一个 CSS 属性进行操作
animation-duration	动画的持续时间
animation-timing-function	动画的速率方式
animation-delay	动画的延迟时间
animation-iteration-count	动画的播放次数
animation-direction	动画的播放方向，正向还是反向

动画方式：animation-timing-function 取值为五种：1.ease(默认，由快到慢) 2.linear(匀速) 3.ease-in(速度越来越快) 4.ease-out(速度越来越慢) 5.ease-in-out(先加速后减速)。

动画的播放次数：animation-iteration-count 取值：为正整数时为播放次数；为 infinite 时为循环播放。

播放方向：animation-direction 取值：normal 正方向播放（默认值）；reverse 反方向播放；alternate 播放次数是奇数时，动画正方向播放，播放次数是偶数时，动画反方向播放

animation 属性实现 CSS3 动画需要两步（跟 JavaScript 中，函数的使用相似）。

（1）定义动画。
（2）调用动画。

在 CSS3 中，在调用动画之前，我们必须先使用@keyframes 规则来定义动画。

语法：

@keyframes 动画名 {
  0% {
  }
  …… 100% {
  }
}

1
2
3
4
5
6

同时，在 CSS3 中，我们可以使用 animation-play-state 属性来定义动画的播放状态。

animation-play-state 属性只有 2 个取值，如下表所示。

属性值	说明
running	播放（默认值）
paused	暂停

# 多列布局

多列布局的属性

属性值	说明
column-count	列数
column-width	每一列的宽度
column-gap	两列之间的距离
column-rule	两列之间的边框样式
column-span	定义跨列样式

column-count：列数

无需 display，直接加上 column-count 属性就可以划分列数，类似报纸的布局。

属性值	说明
auto	列数由 column-width 属性决定（默认值）
n（正整数）	自动划分为 n 列

column-width：每一列的宽度

属性值	说明
auto	列数由 column-count 属性决定（默认值）
长度值	单位可以为 px、em 和百分比等

column-gap：两列之间的距离

属性值	说明
normal	浏览器默认长度值
长度值	单位可以为 px、em 和百分比等

column-rule:列与列之间的边框样式。

语法：

column-rule: width style color;

说明：

column-rule 属性跟 border 属性是非常相似的，它也是一个复合属性，由 3 个子属性组成。

（1）column-rule-width：定义边框的宽度。
（2）column-rule-style：定义边框的样式。
（3）column-rule-color：定义边框的颜色。

column-span:定义跨列样式

属性值	说明
none	不跨列
all	跨所有列（跟 none 相反,类似报纸上的大标题）

# 实例：实现瀑布流布局

瀑布流布局的特点是每列的宽度是相同的，但是高度是随机的。

# 滤镜效果

语法：

filter: 取值 取值 ...;

说明：

其中 filter 属性取值有 10 种，每一种方法对应一种滤镜效果，如下表所示。

属性值	说明	取值
brightness()	亮度	百分比
grayscale()	灰度	百分比
sepia()	复古	百分比
invert()	反色（颜色取反）	百分比
hue-rotate()	旋转（色相）	度数，单位为 deg
drop-shadow()	阴影	x-offset y-offset blur color
opacity()	透明度	百分比
blur()	模糊度	像素值，px
contrast()	对比度	百分比
saturate()	饱和度	百分比

# 弹性盒子布局

属性	说明	使用标签
flex-grow	定义子元素的放大比例	子元素
flex-shrink	定义子元素的缩小比例	子元素
flex-basis	定义子元素的宽度（其实就是 width 的替代品）	子元素
`flex`	flex-grow、flex-shrink、flex-basis 的复合属性	子元素
flex-direction	定义子元素的排列方向（横或竖）	父元素
flex-wrap	定义子元素是单行显示，还是多行显示	父元素
`flex-flow`	flex-direction、flex-wrap 的复合属性	父元素
`order`	定义子元素的排列顺序（正整数，数字越小排在越前面）	子元素
`justify-content`	定义子元素在“横轴”上的对齐方式	父元素
`align-items`	定义子元素在“纵轴”上的对齐方式	父元素

注意

需要注意的一点是：flex：1 和 flex-grow：1 不一样。

flex = 1 的时候，设置了三个属性 flex-grow=1，flex-shrink=1，flex-basis=0%

只设置 flex-grow =1 的时候 flex-grow=1，flex-shrink=1（默认值），flex-basis=auto（默认值）

实际中，优先使用 flex

flex-direction 属性：

属性值	说明
row	横向排列（默认值）
row-reverse	横向反向排列
column	纵向排列
column-reverse	纵向反向排列

flex-wrap 属性：

属性值	说明
nowrap	单行显示（默认值）
wrap	多行显示，也就是换行显示
wrap-reverse	多行显示，但是却是反向

justify-content 属性：

属性值	说明
flex-start	所有子元素在左边（默认值）
center	所有子元素在中间
flex-end	所有子元素在右边
space-between	所有子元素平均分布
space-around	所有子元素平均分布，但两边留有一定间距

align-items 属性：

属性值	说明
flex-start	所有子元素在上边（默认值）
center	所有子元素在中部
flex-end	所有子元素在下边
baseline	所有子元素在父元素的基线上
strecth	拉伸子元素以适应父元素高度

实现块元素的水平和垂直居中

display: flex;
justify-content: center;
align-items: center;

1
2
3

编辑

上次更新: 2023/7/11 18:57:41

← css flex布局语法→