写项目经常用到却记不熟的css样式代码

1.仅左上和右上有圆角

效果图

实现代码

-webkit-border-top-left-radius: 16px;
-webkit-border-top-right-radius: 16px;

2.渐变背景颜色

代码

background: linear-gradient(to right, #1689FE, #49BAFF);

3.去除滚动条

  .part::-webkit-scrollbar {
            display: none;
        }

4.上半部分有渲染渐变

效果图

实现代码

background-image: radial-gradient(at top, #469ffb, #ffffff, #ffffff);

查了好多资料，终于在这篇文章中看到类似的讲解，拿过来测测改改终于实现了。链接放这啦！

5.Vant4 上传组件upload删除按钮变大

效果图

实现代码

直接粘贴至van-uploader组件下面的CSS样式中，会自动生效。不需要更改class名称

.van-uploader__preview-delete--shadow {
    width: 25px;
    height: 25px;
}

.van-uploader__preview-delete-icon {
    width: 22px;
    height: 25px;
    transform: scale(.9) translate(10%, -10%);
    position: absolute;
    top: 6px;
}

6.背景图

效果图

实现代码

.con-box {
    width: 100%;
    height: 100%;
    background-image: url("@/assets/img/backgroundImg.png");
    background-size: 100% 100%;
 }

1.background-image: url(" ") ;

2.background-repeat属性（背景平铺）
repeat 默认值，在水平方向和垂直方向都重复（默认值）
no-repeat 不重复背景图像
repeat-x 只有水平位置会重复背景图像
repeat-y 只有垂直方向会重复背景图像

3.background-size属性（设置背景图片大小）

4.background-position属性（背景图片位置）
x% y% x是水平，y是垂直 。左上角是0％0％。右下角是100％100％
center、top、bottom、left、right

7.超出两行显示省略号

 width: 100%;
overflow:hidden;  //超出文本隐藏
 text-overflow:ellipsis;  ///超出部分省略号显示
display:-webkit-box;  //弹性盒模型
-webkit-box-orient:vertical;  //上下垂直
-webkit-line-clamp:2;  //自定义行数

效果图

8.盒子阴影 box-shadow

color:#F56C6C;
border:1px solid rgb(175, 243, 157);
border-radius: 50px;
/* box-shadow: 水平阴影 垂直阴影
模糊距离 阴影尺寸 阴影颜色 内外阴影；*/
box-shadow: 2px 2px 50px 2px rgb(154, 250, 117);

9.徽标 vant4–badge

可以用作审批流程

<van-badge :content="2" position="bottom-right" color="#EE2222" class="badge-box" :offset="[-6,-6]">
      <div class="back-name">海鸥</div>
      <template #content>
           <van-icon name="cross" class="badge-icon"/>
       </template>
</van-badge>


<van-badge :content="2" position="bottom-right" color="#22c134" class="badge-box" :offset="[-6,-6]">
      <div class="back-name">两三</div>
      <template #content>
            <van-icon name="success" class="badge-icon"/>
       </template>
</van-badge>

.badge-box {
     width: 45px;
    margin-right: 12px;

    .back-name {
         background: #409EFF;
         width: 45px;
         height: 45px;
         line-height: 45px;
         border-radius: 50%;
         text-align: center;
         color: #FFFFFF;
         margin-right: 15px;
     }
     .badge-icon {
         display: block;
         font-size: 8px;
         line-height: 14px;
     }
}

10.自适应图片纵横比

 object-fit: contain;  

object-fit 属性

object-fit: fill|contain|cover|scale-down|none|initial|inherit;