# CSS收藏夹
# 常用
# 技巧收集
# 插件
# css代码生成
CSS Gradient Magic该网站收集很多渐变效果，支持直接复制CSS代码
毛玻璃效果生成
新拟态风格
- 新拟态风格-Neumorphism.io主要生成box-shadow Css代码
- 新拟态风格
新拟态风格的设计稿-可以用来寻找灵感https://dribbble.com/search/neumorphism
分割线代码生成https://www.shapedivider.app/
# css开源库
css-doodle一个css绘画库doodle乱画
mvp.css 一个最简化的 CSS 库，不提供任何自定义的类，只给出最基本的 HTML 元素的样式，适合在它的基础上添加自定义的样式
新拟态风格组件库(基础版本不需要付费)-neumorphism-ui-bootstraphttps://github.com/themesberg/neumorphism-ui-bootstrap
pollen CSS 变量库，提供一组常用的 CSS 变量（比如颜色、长度、字体大小等等）。开发者可以将这个库作为初始变量。
# 碎片知识
# 事件透传
.class{
pointer-events: none;
}
1
2
3
2
3
# 居中
.container为容器.item未子元素- 布局中没写宽和高，但是其实是有的这里省略，除非必须要用到宽高
# flex
.container{
display: flex;
align-items: center;
justify-content: center;
}
1
2
3
4
5
2
3
4
5
# position: absolute + transform: translate
.container{
position: relative;
}
.item{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# position: absolute + margin 负值
.container{
position: relative;
}
.item{
--width:100px;
--height:100px;
width: var(--width);
height: var(--height);
background-color:lightsalmon;
position: absolute;
top: 50%;
left: 50%;
margin-left: calc(var(--width) / -2);
margin-top: calc(var(--height) / -2);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# position: absolute + margin: auto
.container{
position: relative;
}
.item{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# grid
.container{
display: grid;
}
.item{
align-self: center;
justify-self: center;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# table-cell
.container{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.item{
display: inline-block;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# line-height + text-align + vertical-align
- 用于子元素是行内元素 或者行内块元素
.container{
width: 300px;
height: 300px;
line-height: 300px;
text-align: center;
}
.item{
display: inline-block;
vertical-align: middle;
line-height: initial; /* 防止子元素继承父元素的line-height*/
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 省略号
/* 显示一行，省略号 */
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
/* 显示两行，省略号 */
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# clamp 响应式布局
/* minimum 最小值
flexible 弹性值
maximum 最大值 */
h1 {
/* font-size: clamp(minimum, flexible, maximum); */
font-size: clamp(16px, 5vw, 34px);
}
1
2
3
4
5
6
7
2
3
4
5
6
7