CSS+HTML常用功能

.wcontent::-webkit-scrollbar-track-piece {
  background-color: #f5f5f5;
}
.wcontent::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}
.wcontent::-webkit-scrollbar-thumb {
  background-color: #c2c2c2;
  background-clip: padding-box;
  min-height: 28px;
}

/*IE滚动条颜色设置*/
body {
    scrollbar-arrow-color:#f2f2f3;  /*上下箭头*/
    scrollbar-track-color:#1589ce;  /*底层背景色*/
    scrollbar-face-color:#27aeff;   /*滚动条前景色*/
    scrollbar-Shadow-color:#1589ce; /*滚动条边线色*/
}
/*chrome滚动条颜色设置*/
body::-webkit-scrollbar {width:10px; height:10px; background-color:transparent;} /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
body::-webkit-scrollbar-track {background-color:#ccc; border-radius:10px; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);} /*定义滚动条轨道 内阴影+圆角*/
body::-webkit-scrollbar-thumb {background-color:#555; border-radius:10px; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);} /*定义滑块 内阴影+圆角*/

⊙●○①⊕◎Θ⊙¤㊣★☆♀◆◇◣◢◥▲▼△▽⊿◤ ◥
▆ ▇ █ █ ■ ▓ 回 □ 〓≡ ╝╚╔ ╗╬ ═ ╓ ╩ ┠ ┨┯ ┷┏
┓┗ ┛┳⊥『』┌ ┐└ ┘∟「」↑↓→←↘↙♀♂┇┅ ﹉﹊﹍﹎╭
╮╰ ╯ *^_^* ^*^ ^-^ ^_^ ^（^ ∵∴‖｜ ｜︴﹏﹋﹌（）〔〕
【】〖〗＠：！/ " _ < > `,·。≈{}~ ～() _ -『』√ $ @ * & # ※
卐 々∞Ψ ∪∩∈∏ の ℡ ぁ §∮”〃ミ灬ξ№∑⌒ξζω＊??ㄨ ≮≯ ＋
－×÷＋－±／＝∫∮∝ ∞ ∧∨ ∑ ∏ ‖∠ ≌ ∽ ≤ ≥ ≈＜＞じ
☆veve↑↓⊙●★☆■♀『』◆◣◥▲Ψ ※◤ ◥ →№←㊣∑⌒〖〗＠
ξζω□∮〓※∴ぷ▂▃▅▆█ ∏卐【】△√ ∩¤々♀♂∞①ㄨ≡↘↙▂
▶ ▷ ◀ ◁ ★ ☆ ⊙ ♠ ♡ ♣ ♤♥♧♨ 〠 〄 ㍿➳➴➵㊚㊛㊙℗♯♩♪♫♬♭♮ ☎ ☏ ⊙♨ º º ₪ ¤ 큐 « » の ↂ░ ▣ ▤ ▥ ▦ ▧ ▨ ▩ ♂ ♀ ☜ ☞ ▧ ▨ ♨ ◐ ◑ ↔ ↕ ▒ ▣ ▤ ▥ ▦ ▩ ◘ ◙ ◈ ♫ ♬ ♪ ♩ ♭ ♪
✗✘✚✪✣✤✥✦✧✩｡◕‿◕｡ ❤❀✿♥♡ o(‧'''‧)o ๑ ۩ ۞ ۩ ๑ ㊐㊊㊋㊌㊍㊎㊏ ㊑㊒㊓㊔㊕㊖㊗㊘㊜㊝㊞㊟㊠㊡㊢ ㊣㊤㊥㊦㊧㊨㊩㊪㊫㊬㊭㊮㊯㊰
░ ▒ ▬ ♦ ◊ ◦ ♠ ♣ ▣ ۰•● ❤ ●•۰ ► ◄ ▧ ▨ ♨ ◐ ◑ ↔ ↕ ▪ ▫ ☼ ♦ ♧♡♂♀♠♣♥❤☜☞☎☏⊙◎ ☺☻☼▧▨♨◐◑↔↕▪ ▒ ◊◦▣▤▥ ▦▩◘ ◈◇♬♪♩♭♪の★☆→あぃ￡Ю〓§♤♥▶¤ ๑⊹⊱⋛⋌⋚⊰⊹ ≈ ๑۩۩.. ..۩۩๑ ๑۩۞۩๑ ✲ ❈ ✿ ✲ ❈ ➹ ~.~ ◕‿-｡ ☀☂☁【】┱ ┲ ❣ ✚ ✪ ✣ ✤ ✥ ✦❉ ❥ ❦ ❧ ❃ ❂ ❁ ❀ ✄ ☪ ☣ ☢ ☠ ☭ ღღღ ▶ ▷ ◀ ◁ ☀ ☁ ☂ ☃ ☄ ★ ☆ ☇ ☈ ⊙ ☊ ☋ ☌ ☍ⓛⓞⓥⓔ ╬ 『 』∴ ☀ .｡◕‿◕｡ ♫ ♬ ♩ ♭ ♪ ☆ ∷ ﹌ の ★ ◎ ▶☺ ☻ ► ◄ ▧ ▨ ♨ ◐ ◑ ↔ ↕↘ ☼ ▀ ▄ █ ▌░ ▒ ▬ ♦ ◊ ☜ ☞ ▐ ░ ▒▬ ♦ ◊ ◦ ☼ ♪ の ☆→ ♧ ぃ ￡ ❤ ｡◕‿◕｡ ✎ ✟ஐ
︻︼︽︾〒↑↓☉⊙●〇◎¤★☆■▓「」『』◆◇▲△▼▽◣◥◢◣◤ ◥№↑↓→←↘↙Ψ※㊣∑⌒∩【】〖〗＠ξζω□∮〓※》∏卐√ ╳々♀♂∞①ㄨ≡╬╭╮╰╯╱╲ ▂ ▂ ▃ ▄ ▅ ▆ ▇ █ ▂▃▅▆█ ▁▂▃▄▅▆▇█▇▆▅▄▃▂▁

超出几行显示省略号
//单行
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

//多行
overflow : hidden;
text-overflow: ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient: vertical;

常见的MIME类型(通用型)：
超文本标记语言文本 .html text/html
xml文档 .xml text/xml
XHTML文档 .xhtml application/xhtml+xml
普通文本 .txt text/plain
RTF文本 .rtf application/rtf
PDF文档 .pdf application/pdf
Microsoft Word文件 .word application/msword
PNG图像 .png image/png
GIF图形 .gif image/gif
JPEG图形 .jpeg,.jpg image/jpeg
au声音文件 .au audio/basic
MIDI音乐文件 mid,.midi audio/midi,audio/x-midi
RealAudio音乐文件 .ra, .ram audio/x-pn-realaudio
MPEG文件 .mpg,.mpeg video/mpeg
AVI文件 .avi video/x-msvideo
GZIP文件 .gz application/x-gzip
TAR文件 .tar application/x-tar
任意的二进制数据 application/octet-stream

 <input :placeholder="searchPlaceholder" class="search-input"  v-model="leftSearch"  vlaue="u548352" @mouseover="handleMouseover"  @paste="handlePaste">
 
 
handleMouseover (e) {
  if (e.target.value && e.target.value !== '') {
    e.currentTarget.select()
  }
}
//handlePaste粘贴事件
handlePaste (e) {
  let _that = this
  let time = setTimeout(function () {
    _that.$emit('serachChange', _that.leftSearch)
    clearTimeout(time)
  }, 1000)
}

writing-mode：horizontal-tb | vertical-rl | vertical-lr | lr-tb | tb-rl
默认值：normal
适用于：除 <' display '> 属性定义为table-row-group | table-column-group | table-row | table-column之外的所有元素
继承性：有
动画性：否
计算值：特定值

horizontal-tb：
水平方向自上而下的书写方式。即 left-right-top-bottom（类似IE私有值lr-tb）
vertical-rl：
垂直方向自右而左的书写方式。即 top-bottom-right-left（类似IE私有值tb-rl）
vertical-lr：
垂直方向自左而右的书写方式。即 top-bottom-left-right
lr-tb：
左-右，上-下。对象中的内容在水平方向上从左向右流入，后一行在前一行的下面。 所有的字形都是竖直向上的。这种布局是罗马语系使用的（IE）
tb-rl：
上-下，右-左。对象中的内容在垂直方向上从上向下流入，自右向左。后一竖行在前一竖行的左面。全角字符是竖直向上的，半角字符如拉丁字母或片假名顺时针旋转90度。这种布局是东亚语系通常使用的（IE）

writing-mode:{
  horizontal-tb,
  inherit,
  initial,
  lr,
  lr-tb,
  rl,
  rl-tb,
  tb,
  tb-rl,
  unset,
  vertical-lr,
  vertical-rl
}

page-break-after:设置元素后的分页行为
page-break-before:设置元素前的分页行为
page-break-inside:设置内部元素的分页行为

text-indent: 2em;

background-image: -webkit-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);