常用css

背景颜色渐变

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

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);
}
相关推荐
万邦科技Lafite44 分钟前
京东按图搜索京东商品(拍立淘) API (.jd.item_search_img)快速抓取数据
开发语言·前端·数据库·python·电商开放平台·京东开放平台
一只小透明啊啊啊啊3 小时前
Java Web 开发的核心组件:Servlet, JSP,Filter,Listener
java·前端·servlet
你的人类朋友4 小时前
设计模式有哪几类?
前端·后端·设计模式
Yeats_Liao4 小时前
Go Web 编程快速入门 10 - 数据库集成与ORM:连接池、查询优化与事务管理
前端·数据库·后端·golang
啃火龙果的兔子5 小时前
前端八股文react篇
前端·react.js·前端框架
打小就很皮...5 小时前
React 实现 i18next 中英文切换集成
前端·react.js·i18next
拉不动的猪5 小时前
函数组件和异步组件
前端·javascript·面试
淮北4945 小时前
html + css +js
开发语言·前端·javascript·css·html
你的人类朋友5 小时前
适配器模式:适配就完事了bro!
前端·后端·设计模式
Setsuna_F_Seiei5 小时前
CocosCreator 游戏开发 - 利用 AssetsBundle 技术对小游戏包体积进行优化
前端·cocos creator·游戏开发