常用css - 技术栈

常用css

四岁半儿2025-08-21 23:57

背景颜色渐变

从左边开始的线性渐变。起点是红色，慢慢过渡到黄色

bash 复制代码

background-image: linear-gradient(to right, red , yellow);

从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到黄色

bash 复制代码

background-image: linear-gradient(to bottom right, red, yellow);

动态绑定背景图片

bash 复制代码

:style="{'backgroundImage': 'url(./../../static/bank/' + item.headBankCode + '_bgc.png)'}"

背景透明

bash 复制代码

background-color: transparent;
opacity:0;
background-color: rgba(0, 0, 0, 0);

图片地址添加随机字符串

bash 复制代码

<image :src="item.imgPath+'?'+new Date().getTime()" mode=""></image>

图片地址.png前面拼随机串

bash 复制代码

this.javaUploadInvoice.substring(0,this.javaUploadInvoice.length-4) + '?' + new Date().getTime() + this.javaUploadInvoice.substring(this.javaUploadInvoice.length-4)

使用CSS将多余文字显示成省略号

单行

bash 复制代码

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行

bash 复制代码

word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
-webkit-line-clamp: 行数

vue中 :style 与 :class 三元运算符使用

style三元表达式:

bash 复制代码

<p :style="{'color': (checkIndex3==m.txt ? '#3d8cff':'#BBBBBB')}">{{m.txt}}</p>

class三元表达式:

bash 复制代码

<i class="iconfont " :class="[isShow=='password'?'icon-kejian':'icon-bukejian']"></i>

使用:class给同级div设计背景颜色

bash 复制代码

:class="{content1:index===0,content2:index===1,content3:index===2,content4:index!=0&&index!=1&&index!=2}"

content例子
.content1{
background-image: linear-gradient(to right, #f41414 , #f41414);
}
.content2{
background-image: linear-gradient(to right, #0766f1 , #07a4f1);
}