css相关

1 flex-direction 属性

div { display:flex; flex-direction:row-reverse; }

2旋转角度 用于图标来回切换

transform: rotate(180deg);

3背景颜色渐变

linear-gradient(45deg, #4F8AFF 0%, #4B5EFF 100%);

4 calc计算 * 减号前后有空格

width: calc(100% - 199px);

5下划线

text-decoration:underline
a:hover{ text-decoration:underline;}
text-decoration下划线 
 none : 　无装饰
 blink : 　闪烁 
 underline : 　下划线 
 line-through : 　贯穿线 
 overline : 　上划线

6 background引用图片

width: 150px; height: 140px; 
background: url(../../assets/images/log-i1.png) no-repeat;
 background-size: 100% 100%;

7 css引用字体

@font-face {
font-family: 'dINCondensedBold';
src: url('../../../assets/fonts/DIN Condensed Bold.ttf');
}

8 深度选择器

::v-deep 或者/deep/

9 CSS 子元素选择器

//规定属于其父元素的第二个 p 元素的每个 p：
p:nth-of-type(2)
{
background:#ff0000;

10 CSS文字不换行，超出部分显示…

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

11修改el-table表头样式

<el-table
:data="tableData"
class="recent-contributions"
:header-cell-style="{background: '#D0D0D0',color:'#000000'}"
>

12阴影

// ox-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式];
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.3);
单方阴影写法
box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);

13四边阴影

box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 10px;
margin-bottom: 20px;

14多行超出 …

height: 125px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;//显示的行数
-webkit-box-orient: vertical;

15 justify-content 属性360浏览器不生效

justify-content: flex-end; flex-start 
在谷歌里面可以简写 strat 但是不标准，必须使用 flex-start 

16 旋转

 // 旋转
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);

 // 旋转
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);

17 引入图片时 size 要100% 100% 不然会显示不全

 background: url(../../../assets/images/ash-bucket/Three-arrows.png)
      no-repeat;
    background-size: 100% 100%;

flex水平居中

  		display: flex;
        justify-content: space-evenly;
        align-items: center; //水平居中

引入文件地址

background-image:url('~@/assets/')