CSS 遇到的一些问题

1、定义全局变量颜色

在全局样式里定义：

  --themeColor: rgba(12, 110, 245, 1);

引用：

        border-bottom: 5px solid var(--themeColor);

2、缩小图片不变形：

            transform:scale(0.7);

3、使用外部字体

在assets文件中 新建引入字体文件夹 :

image.png

新建.css文件 引入字体：

@font-face {
    font-family: 'AlbbBold'; 
    src: url('../fonts/Alibaba-PuHuiTi-Bold.ttf'); 
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'AlbbHeavy'; 
    src: url('../fonts/Alibaba-PuHuiTi-Heavy.ttf'); 
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'AlbbLight'; 
    src: url('../fonts/Alibaba-PuHuiTi-Light.ttf'); 
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'AlbbMedium'; 
    src: url('../fonts/Alibaba-PuHuiTi-Medium.ttf'); 
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'AlbbRegular'; 
    src: url('../fonts/Alibaba-PuHuiTi-Regular.ttf'); 
    font-weight: normal;
    font-style: normal;
}

使用字体，根据定义的名字使用：

image.png

4、使用UI组件框架，有默认样式，去掉背景颜色

        background-color: transparent !important;

5、object-fit属性

一般用于 img 和 video 标签，一般可以对这些原素进行保留原始比例的剪切、缩放或者直接进行拉伸等。
参考链接：https://www.runoob.com/cssref/pr-object-fit.html

6、页面出现滚动条

   overflow-x: hidden;

7、使用 text-align: right 不生效

看看样式中有没有用到弹性盒子

          display: flex;

如果用到弹性盒子，再使用text-align 就不生效

举例子：

 ul {
          display: flex;
          cursor: pointer;
          // padding: 20px 0;
          li {
            // float: right;
            text-align: right;
            color: #ffffff;
            // font-size: 14px;
            text-align: center;//上面已经用弹性盒子 这里不生效
            &:hover {
              color: var(--themeColor);
            }
            div {
              margin-right: 20px;
            }
          }
        }

8、CSS3 box-shadow

image.png image.png image.png

参考链接：https://www.html.cn/archives/9360/