更新于 

css/sass/scss

Css

光标 caret

caret-color 光标颜色

caret-color可以用来修改光标颜色

1
caret-color: red;

背景

backdrop-filter 毛玻璃效果

参考博客： CSS简易毛玻璃效果

backdrop-filter用于给背景添加滤镜效果

1
backdrop-filter: blur(5px);
TEXT

文字

文字末端添加省略号

参考：CSS多行文本省略号

单行末端添加省略号
1
2
3
4
5
6
.box{
    width:200px; /* 设置宽度 */
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 超出隐藏 */
    text-overflow: ellipsis; /* 设置省略号 */
}
此处文字后添加省略号此处文字后添加省略号此处文字后添加省略号
多行末端添加省略号
1
2
3
4
5
6
7
.container {
    display: -webkit-box; /* 设置webkit流体布局 */
    -webkit-line-clamp: 2; /* 希望展示的行数 */
    -webkit-box-orient: vertical; /* 垂直排列的效果 */
    overflow: hidden;
    text-overflow: ellipsis; /* 设置省略号 */
}
此处文字后添加省略号此处文字后添加省略号此处文字后添加省略号

定位

fixed无法相对父元素定位

参考博客

fixed定位仅仅能相对于浏览器窗口，
可以通过设置fixed元素的margin来实现

1
2
3
4
5
<div class="wrapper-box">
    <div class="scroll-box">
        <div class="inner-fix-box">Fix Box</div>
    </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.wrapper-box{
    width:100px;
    height:100px;
    background: #ffaa00;
    overflow-y:scroll ;
}
.scroll-box{
    width:100%;
    height:300px;
    position:relative;
    z-index:99;
}
.inner-fix-box{
    width:100%;
    position:fixed;
    color:#000;
}

color

相对颜色语法

Google专栏：CSS相对颜色语法

修改不透明度
1
2
3
color: rgb(from #00800080 r g b / alpha);           /* alpha=50% */
color: rgb(from rgba(0,128,0,.5) r g b / alpha);      /* alpha=50% */
color: rgb(from rgb(0 128 0 / 50%) r g b / alpha);    /* alpha=50% */

布局

grid

阮一峰：CSS Grid网格布局教程

响应式

媒体查询 @media

MDN