css你不常用但很实用的属性```css background-color: transparent; // 背景色透明

1.css实用的属性

text-indent: 2em; // 首行缩进两个字符
text-align: right; // 让文本右对齐
letter-spacing：px; 汉字间字间距设置或者英文单词中每个字母的间距

background-color: transparent; // 背景色透明
filter: blur(xxpx);// 高斯模糊值
backdrop-filter: blur(8px); // 透过该层的底部元素模糊化
clip-path: inset(0 round 4px); // 当元素设置了渐变后，圆角会失效，设置此属性重新裁剪圆角

transform: rotate(1turn); // 转一圈（用于animation）
flex:1; // 让元素去占满剩余的空间
object-fit: cover; // 不改变图片的比例 裁剪图片让图片覆盖目标区域

p:nth-child(2);  // 查找兄弟元素里的第二个子元素，且这个元素是p，才会应用样式；
p:nth-of-type(2); // 查找兄弟元素里第二个为类型为p的元素，应用样式

::v-deep .el-carousel__item {
    border-radius: 16px;
}  // ::v-deep 使scoped样式中的一个选择器能够选择到子组或后代组件中的元素(由于组件样式)

2、写在开头：通用的样式（建议直接cv）

使用：@include flex(); @include flexCenter(space-between); ......

@mixin flex() {
  display: flex;
  align-items: center;
}
@mixin flexCenter($jc) {
  display: flex;
  align-items: center;
  justify-content: $jc;
}
@mixin wh($w, $h) {
  width: $w;
  height: $h;
}
@mixin fc($size, $color) {
  font-size: $size;
  color: $color;
}
@mixin ellipsis($num) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $num; //这里是在第二行有省略号
  overflow: hidden;
}
@mixin br($color, $size) {
  background: $color;
  border-radius: $size;
}

3、text-align:center;

块级元素下使用text-align: center，使得其文本内容居中对齐
块级元素下使用text-align: center，使得包含在其中的行内元素或行内块元素居中对齐
块级元素下使用text-align: center，包含在其中的块级元素一般不能居中对齐。如果这个块级元素p内有文本或者行内元素，则会在块级元素p中被居中(因为text-align属性可以被继承)。但是有个例外：如果子块级元素没有设置宽高，可以实现水平居中。另外，块级元素设置了宽高的水平居中方法：margin: 0 auto;

4、块级、行内、行内块元素

块级：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer......
行内：a、span 、b、u、i、s、strong、ins、em、del......
行内块：button、input、textarea、select、img