CSS/样式渲染 碰撞点合集

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); 
}