css篇（技術總結 持續更新）

20200418 鼠標懸浮文本顏色漸變

.header .kind .item:hover .name{
    color: #3FA8FF;
    -webkit-transition-property:color;
    -o-transition-property:color;
    -moz-transition-property:color;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;
    -moz-transition-duration:0.5s;
}

20200417 css超出橫向滾動

overflow-x: auto;
white-space:nowrap;

20200331 小程序端設置border用px 不要用rpx 否則會在安卓端變粗

20200227 input框type=file時設置cursor:pointer不起作用

cursor: pointer;font-size: 0

20200102 element-ui卡片頭部樣式修改

原因解析：直接在當前頁覆蓋.el-card__header樣式發現並未生效，scoped私有化導致的。去除scoped即可，但是全局的卡片頭部樣式都跟着修改了。解決辦法：曲線救國 自定義樣式

<div class="card-header">我是標題</div>
.card-header {
  margin: -20px -20px 20px;
  padding: 10px 20px;
  background: #d2d4d8;
}

20191229 最簡單的流媒體佈局的實現

.list{
  column-count:2;    
  column-gap: 12rpx;
}
.list .item{
  break-inside: avoid; 
  box-sizing: border-box;
  /* display: inline-block; */
}

20191227 flex橫向佈局時圖片被壓縮的問題

flex橫向佈局 左邊圖片 右邊div 圖片給了固定寬度 但還是會被壓縮 解決辦法 右邊div設置flex:1

20191207 修改placeholder樣式

input::-webkit-input-placeholder {
  /* WebKit browsers */
  color: red;
}
input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: red;
}
input:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: red;
}

20191206 css實現毛玻璃效果（高斯模糊）

filter: blur(10px)    // 值越大越模糊

css變量如何定義

html{
  --mainColor: #000;
}
span{
  color: var(--mainColor);
}

ios系統下input去掉上邊框陰影 

outline: none;
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

文本單行超出省略號

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

文本多行超出省略號 

overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
/*! autoprefixer: off */
-webkit-box-orient:vertical;
/* autoprefixer: on */
-webkit-line-clamp:2;

1.加上面兩行註釋的原因是避免vue-cli打包後-webkit-box-orient:vertical丟失問題
2.多行時最好與line-height結合使用 避免有些手機文本超出後依然顯示

css如何設置背景透明而文字不透明

// 通常情況下 這樣寫背景和內容都會透明  
background-color:#000000;
opacity: 0.6;
// 但有時候只想讓背景透明 內容正常顯示
background-color:rgba(0,0,0,0.6);

css如何同時設置背景圖片和背景色

background: url('../img/bg.png') no-repeat top,#DA2121;
background-size: 100%;

文字樣式處理加橫線字體傾斜和間距 

背景色設置爲linear-gradient漸變色時必須使用background屬性
塊級元素和圖片元素上下並列時會有間隙 設置display: block

text-decoration:underline;  // 文字底部下劃線
text-decoration:line-through;  // 文字中間加橫線

font-style: italic;    // 斜體
letter-spacing:2px;    // 字體間距

div設置寬度等於100%後加padding內容會溢出

box-sizing:border-box;    // 任何內邊距和邊框都將在已設定的寬度和高度內進行繪製

elementUI中show-overflow-tooltip="true"在safari等瀏覽器上失效問題

<el-table-column align="center" prop="PushContent" label="消息詳情" width="200">
  <template slot-scope="scope">
    <el-tooltip v-if="scope.row.PushContent.length>10" class="item" effect="dark" :content="scope.row.PushContent" placement="top">
      <div style="width: 180px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{scope.row.PushContent}}</div>
    </el-tooltip>
    <div v-if="scope.row.PushContent.length<=10">{{scope.row.PushContent}}</div>
  </template>
</el-table-column>