大家好，我是讯享网，很高兴认识大家。

CSS3 属性整理

border属性

border-radius 圆角

![](https://img-blog.csdn.net/?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbHl6bmljZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEasv

• border-radius: 50%; 变成圆
• border-radius: 单位（px,em,rem,%）;

---

box-shadow 阴影

讯享网

• box-shadow: X轴偏移值 Y轴偏移值 模糊距离 阴影的尺寸 阴影的颜色 外部\内部阴影(inset outset)

---

box-sizing 改变盒模型

• 属性值为content-box时，宽高的值为content的宽高；
• 属性值为border-box时，宽高的值为border + padding + content也就是整个盒模型的宽高；

---

linear-gradient 背景的颜色渐变（IE10）

background: -webkit-linear-gradient(red, yellow); 从上到下 background: -webkit-linear-gradient(left, green , yellow); 从左到右 background: -webkit-linear-gradient(top left, blue , yellow); 左上到右下 background: -webkit-linear-gradient(60deg, rgb(248, 182, 44), rgb(0, 159, 233)); 角度渐变 0deg 左为正确方向 正值 逆时针 background: -webkit-linear-gradient(45deg,red,orange,yellow,green,blue,indigo,violet); 多渐变 

讯享网

径向渐变

讯享网颜色结点均匀分布 background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 - 6.0 */ 对于颜色发辐射界限，我们也可以进行设置 background: -webkit-radial-gradient(red 5%, yellow 15%, green 60%); shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。 默认值是 ellipse background: -webkit-radial-gradient(circle, red, yellow, green); 重复渐变 background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); 

text-shadow 文字阴影

text-shadow: x轴偏移值 y轴偏移值 模糊距离 颜色; 

nvue控制文字只显示一行/超出显示省略号

讯享网lines: 1; text-overflow: ellipsis; 

如何让单行文本以及多行文本溢出显示省略号(…)

网页源码：https://baijiahao.baidu.com/s?id=&wfr=spider&for=pc

1）单行文本溢出显示省略号

溢出隐藏：overflow:hidden;

显示省略号：text-overflow:ellipsis;

不换行：white-space:nowrap;

2）多行文本溢出显示省略号

核心css语句：

1、-webkit-line-clamp:2; （用来限制在一个块元素显示的文本的行数,2表示最多显示2行。 为了实现该效果，它需要组合其他的WebKit属性）

2、display: -webkit-box; （和1结合使用，将对象作为弹性伸缩盒子模型显示 ）

3、-webkit-box-orient:vertical;（ 和1结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 。）

4、overflow:hidden; （顾名思义超出限定的宽度就隐藏内容）

5、text-overflow: ellipsis;（规定当文本溢出时显示省略符号来代表被修剪的文本）

-webkit-line-clamp:2; display: -webkit-box; -webkit-box-orient:vertical; overflow:hidden;

text-overflow: ellipsis;

transition 过度动画 补间动画

transition: 需要过度的属性 多长时间过度完 运动曲线 延迟几秒播放; 也可以拆开来写这几个属性 transition-property: 过度的属性; transition-duration: 过度的时间; transition-timing-function: 运动曲线; linear 匀速 ease 先慢后快慢结束 ease-in 慢速开始 ease-out 慢速结束 ease-in-out 慢速开始和结束 transition-delay: 延迟秒数; 

2D 属性 transform

讯享网transform: rotate(正数顺时针, 负数逆时针) 2D旋转 角度 transform: scale(X轴放大倍数, y轴放大倍数) 2D放大 transform: translate(x轴位移, y轴位移) 2D平移 transform: skew(x轴角度, y轴角度) 2D斜切 

3D 属性 transfrom

三维空间中呈现效果 transform-style: preserve-3d; 默认值为 flat transform: rotateX(deg); 上下旋转 transform: rotateY(deg); 左右旋转 transform: rotateZ(deg); 跟2D旋转一样 transform: translateZ(px); 正值向屏幕 负值距离屏幕更远 transform: translateX() translateY(); 跟2D一样没有变化 transform-origin: x, y, z; 值可以用 left bottom right top 或者相对值 元素背面是否可见 不可见 可见 backface-visibility: hidden visible; 

CSS3 动画（animation）

讯享网@keyframes 动画名 { 
    0% { 
    } 100% { 
    } } div { 
    animation: 动画名 执行时间s 运动曲线 延迟 播放次数 infinite 是否往返 alternate 曲线： ease-in-out ease-in ease-out linear } 

css弹性盒子

https://www.runoob.com/w3cnote/flex-grammar.html

容器默认存在两根轴：水平的主轴Y（main axis）和垂直的交叉轴X（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gOyjJaMB-79)(C:\Users\Administrator\Desktop\css笔记\图片\3791e575c48b3698be6a94ae1dbff79d.png)]

display: flex; flex-direction: 决定主轴的方向（即项目的排列方向） row（默认值。灵活的项目将水平显示，正如一个行一样。） row-reverse（与 row 相同，但是以相反的顺序。） column（灵活的项目将垂直显示，正如一个列一样。） column-reverse（与 column 相同，但是以相反的顺序。）; 排布方向 default（默认） row flex-wrap: nowrap wrap; default nowrap （1）nowrap（默认）：不换行。 （2）wrap：换行，第一行在上方。 （3）wrap-reverse：换行，第一行在下方。 flex-flow: flex-direction flex-wrap; 复合属性 flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 y轴 主轴排布方式 justify-content 设置或检索弹性盒子元素在主轴方向上的对齐方式: flex-start center flex-end space-between flex-start（默认值）：左对齐 flex-end：右对齐 center： 居中 水平方向居中对齐 space-between：两端对齐，项目之间的间隔都相等。 space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 x轴 交叉轴排布方式 align-items 属性定义项目在交叉轴上如何对齐。 flex-start：交叉轴的起点对齐。 flex-end：交叉轴的终点对齐。 center：交叉轴的中点对齐。垂直方向居中对齐 baseline: 项目的第一行文字的基线对齐。 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 flex-start flex-end center baseline stretch; align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 flex-start：与交叉轴的起点对齐。 flex-end：与交叉轴的终点对齐。 center：与交叉轴的中点对齐。 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 stretch（默认值）：轴线占满整个交叉轴。 项目上的属性 order 项目的排列顺序: number; 项目的优先级 值越小 靠前 flex-grow 项目的放大比例: number; 项目的等比例分布 flex-shrink 项目的缩小比例: default 1; 项目是否在空间不足的时候缩放 flex-basis: 在分配多余空间之前，项目占据的主轴空间 ; 可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。 flex: flex-grow flex-shrink flex-basis; flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 align-self:允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto ; 项目的交叉轴摆放 

https://www.php.cn/css-tutorial-410902.html

一、css word-spacing属性设置字间距（单词的间距）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QYToXQd9-82)(C:\Users\Administrator\Desktop\css笔记\图片\css word-spacing.PNG)]

二、css letter-spacing属性设置字间距

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pkTygcbJ-85)(C:\Users\Administrator\Desktop\css笔记\图片\css letter-spacing.PNG)]

如何让单行文本以及多行文本溢出显示省略号(…)

网页源码：https://baijiahao.baidu.com/s?id=&wfr=spider&for=pc

CSS字体样式属性

font-size:字号大小

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mh31YYVD-89)(C:\Users\Administrator\Desktop\css笔记\图片\字体大小示意图.png)]

font-family:属性用于设置字体

p{ font-family:“微软雅黑”;}

font-weight:属性用于定义字体的粗细，

其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。

字体加粗除了用 b 和 strong 标签之外,css 数字 400 等价于 normal，而 700 等价于 bold。

font-style:属性用于定义字体风格

normal：默认值; italic:斜体; oblique:倾斜;

字体倾斜用 i 和 em 标签

font属性用于对字体样式进行综合设置

css 选择器{font: font-style font-weight font-size/line-height font-family;}

CSS外观属性

讯享网 color: darksalmon; /* 字体颜色 */ font-size: 50px; /* 字体大小 */ font-family: "宋体"; /* 字体样式 */ font-style: italic; /* 字体倾斜 */ font-weight: bolder; /* 字体粗细 */ text-align: center; /* 字体对齐方式 */ text-decoration: underline; /* 字体下划线 */ text-indent: 5%; /* 首行缩进 */ letter-spacing: 5px; /* 设置字间距 */ line-height: 60px; /* 设置行高 */ text-shadow: 5px 5px 15px blue; /* 设置文本阴影：水平方向偏移量，垂直方向偏移量，阴影面积，阴影颜色 */ 

color：文本颜色；

line-height:行间距；行与行之间的距离，即字符的垂直间距；行距比字号大7.8像素左右。

text-align:文本内容的对齐方式；

left：左对齐（默认值）

right：右对齐

center：居中对齐

text-indent：文本首行缩进；

建议使用em作为设置单位。1em 就是一个字的宽度

text-decoration： 文本的装饰

None | 默认。定义标准的文本。

underline | 定义文本下的一条线。下划线 也是我们链接自带的

Overline | 定义文本上的一条线。

line-through | 定义穿过文本下的一条线。

css复合选择器

交集选择器：第一个为标签选择器，第二个为class选择器，

两个选择器之间不能有空格，如h3.special。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hatqoz4x-92)(C:\Users\Administrator\Desktop\css笔记\图片\交集.png)]

并集选择器： 和 的意思，所有选择器都会执行后面样式。

\逗号\连接而成

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LxjwqZv4-95)(C:\Users\Administrator\Desktop\css笔记\图片\并集.png)]

后代选择器（包含选择器）

外层标签写在前面，内层标签写在后面，中间用空格分隔

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U5JtRViA-96)(C:\Users\Administrator\Desktop\css笔记\图片\后代.png)]

子元素选择器

父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Sp43fOef-98)(C:\Users\Administrator\Desktop\css笔记\图片\子集.png)]

· :hover /* 鼠标移动到链接上 */

a:hover { / :hover 是链接伪类选择器 鼠标经过 / color: red; / 鼠标经过的时候，由原来的 灰色 变成了红色 */ }

*标签显示模式（display）*

HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。

• 块级元素（block-level)

独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

块元素有

，

~

、

、

、

• 、
  1. 、
  2. 等