1.设置渐变色
background: linear-gradient(90deg, #3361F2 0%, #41AFF7 100%);
2.动态计算高度
height: calc(100vh - 150px);
3.el-table 行样式错乱
.el-table colgroup.gutter {
display: table-cell !important;
}
.el-table th.gutter {
display: table-cell !important;
}
或者使用js
this.$refs.singleTable.doLayout()
4.form表单输入值没有效果
在data里面全部重新定义一遍() vue.js
data() {
return:{
form:{
"name":"",
"sheet":""
}
}
}
5.渐变
linear-gradient :纵向渐变
radial-gradient:横向渐变
repeating-linear-gradient :重复纵向渐变
repeating-radial-gradient :重复横向渐变
6.浏览器属性前缀
/* IE 10 -ms
/*火狐 -moz
/* Safari 4-5, Chrome 1-9 -webkit
/*Opera 11.10+ -o
W3C标准属性没有前缀,一般为保证浏览器的一致性标准属性写在最后
7.使用反射实现文字倒影
box-reflect:below 1px linear-gradient(transparent,transparent 50%,rgba(0,0,0,.3))
8.字体阴影
text-shadow:0 0 5px #ff0000;
9.字体描边
text-stroke:1.0px #000;
10.网页像报纸一样分栏排版
column-count:定义分列的数量
column-gap:定义每一列的宽度
column-rule:定义分栏中间的样式
eg:
column-count:3;
column-gap:30px;
column-rule:1px dashed black;
11.文字溢出和破字
text-overflow:ellipse;
(ellipse:省略号代替,clip:修剪文本,string:使用指定的字符串代替被修剪的文本)
12.阴影
内部:box-shadow:0 0 30px 10px inset;
外部:box-shadow:0 0 30px 10px;
13.移入图片显示手型以及放大图片
.itemImg {
margin-bottom: 40rpx;
cursor: pointer;
transition: all 0.6s;
}
.itemImg:hover {
transform: scale(1.3);
}