CSS 小知识点

flex中item设置宽度后，宽度被压缩

内部item需要设置

min-width: 200px;
flex-shrink: 0;

div中居中显示文本

• 方法1： 设置 line-height = height

height: 110px;
line-height: 110px;
text-align: center;

• 方法2： 将div的display设置成 flex

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

设置单向border

border-bottom: 1px solid #93989f; //边
border-bottom-right-radius: 8px; //圆角
border-bottom-left-radius: 8px;

文本超出显示省略号

• 块级元素 （display: block;//默认,日常遇到的最多）

.divTitle {
    width: 10px; //需要设置宽度
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

• 内联元素需要将display 设置成display: inline-block;

.spanTitle {
    display: inline-block;
    width: 10px;//需要设置宽度
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

• 在table内td除了和普通div一样设置外,还要在table的样式里定义一个属性table-layout:fixed;

table { 
    table-layout:fixed; 
}
td { 
    width: 10px; //需要设置宽度
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
   
} 

设置动画

• transition

transform: translate(0, 0);
transition: transform 0.3s ease-in-out 0.3s;

• keyframes

@keyframes slide-down {
    0% { transform: scale(1, 0); }
    25% { transform: scale(1, 1.2); }
    50% { transform: scale(1, 0.85); }
    75% { transform: scale(1, 1.05); }
    100% { transform: scale(1, 1); }
}

 &.show {
    display: block;
    opacity: 1;
    animation: slide-down 0.1s ease-in;// 触发slide-down keyframes
}

background可以直接加base64数据作为背景图

background: url(data:image/png;base64,iVBORw0KGgo...dsdewecKJKjJSC);

第一个最后一个item选择器

&:first-child {
    margin-left: 16px;
}
&:last-child {
    margin-left: 16px;
}

背景毛玻璃效果

backdrop-filter: blur(10px);//注意单位是px

背景颜色渐变

• 语法background-image: linear-gradient(direction, color-stop1, color-stop2, ...);这里以线性渐变为例子

//默认从上到下
background-image: linear-gradient(#e66465, #9198e5);

//从左到右
background-image: linear-gradient(to right, red , yellow);

//对角渐变 从左上角到右下角的线性渐变：
height: 200px; 
background-image: linear-gradient(to bottom right, red, yellow);

参考 www.runoob.com/css3/css3-g…

指示小三角

.triangle {
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-right: 4px solid rgba($color: #000, $alpha: 0.25);
    border-bottom: 4px solid transparent;
}