互聯網 - 大數據

文章出處
　　說來慚愧自認為對css了解，但在項目中卻很少有正確的使用css，如果面向對象的css吧，其實也不是不想用而是css天生就是面向對象的，高度可重用，但是如果把每個都單獨提取，難免會有過多的class以及自己也比較懶。
　　你要干嘛就選擇什么樣的標簽，命名也一樣。從內容本質出發，它是干什么的。
　　微型格式，如果某些內容需要的標簽沒有，可以使用class來代替 class="vcard"聯系信息。
　　
　　通過需求和流程圖可以事先考慮如何布局使用什么元素。
 
標簽的使用：
　　ul無序列表
　　ol有序列表
　　dl>dt+dd描述內容 可以用在商品之類的描述上
　　blockquote描述,q短描述 cite引用 可以用在用戶評論上
　　em強調
 
css屬性
　　用outline替代border這樣就不用再減border的值了或者使用box-sizing:border-box;
　　又想設置高度有想高度自適應可以使用min-height
　　box-sizing
　　　　表示width寬度包含哪些,默認值是content-box表示width只包括內容寬度
 
媒體查詢
　　@media screen and (min-width:640px)
　　　　screen屏幕(width:xx)包括瀏覽器滾動條
　　　　only對不支持該語法的瀏覽器隱藏此規則
　　　　not如果瀏覽器不滿足設置的條件可以通過not來設置
 

通過device-width可以獲取設備寬和高不包括瀏覽器滾動條。

通過orientation特性可以根據屏幕的寬度和高度的比較設計不同樣式。orientation:landscape當瀏覽器寬度大于高度的時候會被匹配成功，而portrait則相反。我們可以用它來實現響應式的導航。

touch-enabled可以匹配觸摸屏

 
通過媒體查詢和rem實現響應式字體大小

html{
　　font-size:10px;
}
@media only device-width and (min-width:360px) {
　　html{
　　　　font-size: 11px!important;
　　}
}
@media only device-width and (min-width:400px) {
　　html{
　　　　font-size: 13px!important;
　　}
}
@media only device-width and (min-width:1000px) {
　　body{
　　　　max-width:640px;
　　　　margin:0 auto;
　　}
}

　　iPhone、iPad，和Android等設備會通過四個屏幕側邊中較短的一對去測量device-width。也就是說，給定尺寸為320×480的設備，不管是以縱向還是橫向模式去查看，device-width都會是320px。
 
網頁字體
　　@font-face定義字體規則

　　@font-face{
　　　　font-family:字體名;
　　　　src:local('字體名'),url('你要導入的字體路徑') format('字體類型')
　　}

local使用源字體的名稱去檢查字體是否已經安裝在用戶的機器上；url提供一個指向字體的路徑，當字體在本地不可用時使用；而format指定字體的類型
通過font-family:字體名,來使用，并且可以覆蓋字符。
 
兼容IE9以下
src:url('xx.eot')；
ie9以下支持eot格式，不支持local
為了兼容強制下載所定義的字體
local('☺')
可以指定多個url路徑以,分割達到兼容的效果。
 
更簡單的兼容方法

@font-face{
　　font-family:name;
　　src:url('filename.eot?') format(eot),
　　url('filename.woff') format('woff'),
　　url('filename.otf') format ('opentype'),
　　url('filename.svg#filename') format('svg');
}

　　@font-face生成器（http://www.fontsquirrel.com/fontface/generator/）。只要簡單上傳你要使用的字體文件，@font-face生成器就會將其轉化為所有相關的格式——而且還可以生成需要在頁面中使用的CSS。
 
font-stretch屬性，它告訴瀏覽器顯示的字體風格要比當前更窄一些。
使用font-size-adjust屬性。該屬性可以動態修改font-size屬性。
 
文本效果
　　text-shadow:x y blur-radius color
　　文字陰影,支持多重陰影用，分割
　　-webkit-text-stroke:width color
　　描邊
　　-webkit-text-fill-color:color
　　填充，對字符的輪廓進行描邊
　　text-overflow:ellipsis
　　用省略號替換超出的文字
　　white-space:nowrap;
　　防止文本被折疊成多行
　　注意還需要加overflow:hidden;并且寬度。
 
　　resize:both;
　　改變元素大小
　　text-align:justify;
　　文本兩端對齊
　　text-align-last
　　設置最后一段文本的對齊方式
 
多列布局
　　column-count:number
　　要分成幾列
　　column-width:單位
　　根據屏幕寬度自動分列
　　column-gap:單位
　　邊界間隔
　　column-rule:1px solid red;
　　分界線
 
背景
　　一個元素支持多個背景圖片以,分割
　　background-size
　　對背景圖片進行縮放
　　
　　background-clip:border-box、content-box、padding-box
　　背景裁剪,它會設置盒模型的那一部分成為背景（顏色或圖片）顯示的界限
　　
　　background-origin:border-box、content-box、padding-box
　　設置背景開始計算的點
　　
　　background-repeat:space、round
　　space:平鋪且不被裁剪或縮放的最大數量的圖片，并且在顯示時會有空白區域出現在它們中間
　　round:水平和垂直填充包含元素的圖片的最大完整數量
 
　　background-image:image-rect(url,top,right,bottom,left)
　　背景圖片裁剪,解決圖片精靈問題
 
　　mask:url repeat x y;
　　遮罩
 
　　border-radius
　　邊框
　　border-image
　　邊框圖片
 
　　box-shadow:inset x y radius spread color
　　盒子陰影,radius:模糊半徑,spread:陰影擴散的距離
 
　　rgba值只能應用到它指定的元素上,所以子元素可以否決所有的繼承。
　　currentColor表示當前color顏色值
 
　　appearance:button、radio-button、password...
　　使用來自操作系統的不同地方的顏色。
 
2D變換-transform
　　允許多重變換以空格隔開 transform:rotate(10deg) skew();
　　transform:rotate(10deg);
　　旋轉
 
　　transform-origin:x y;
　　改變原點,transform屬性中默認的原點是水平垂直中心
 
　　translate(x,y)
　　平移,該函數可將元素從它的默認位置進行移動
　　translate非常類似于使用相對定位以及left和top屬性，但請記住，經過變換的元素會保留它的位置，只是從顯示上看起來像被移動過，被變換的是元素的圖像，而不是元素本身。
 
　　skew(x,y)
　　傾斜
 
　　scale(x,y)
　　縮放
 
　　matrix
　　矩陣
　　box-reflect:direction offset image;
　　反射
 
　　transition:property time ease、linear、ease-in、ease-out、ease-in-out delay
　　過渡
 
動畫
　　@keyframes聲明關鍵幀

@keyframes 'name'{
　　keyframes{
　　　　property:value;
　　}
}

　　通過animation來調用
　　animation:name time ease、linear、ease-in、ease-out、ease-in-out delay count direction
　　名字 持續時間 運動方式 延遲 執行次數(infinite重復播放) 方向(normal或者alternate反向播放)
 
　　播放狀態
　　animation-play-state:running|paused
　　running表示動畫正在播放，而paused表示動畫未在播放
 
　　允許多重動畫。
3D變換
　　transform-style:preserve-3d;
　　perspective
　　透視
　　perspective-origin
 
　　transform-origin
　　變換原點
 

文章出處
屬性選擇器
　　[title]:選擇帶有title屬性的元素
　　[title='hello']:選擇屬性是title并且值是hello的元素
　　[title~='hello']:選擇屬性是title并且部分值是hello的元素，hello需要是單獨的值，以空格分開
　　[title*='hello']:選擇屬性是title并且其中包含了hello的元素
　　[title|='hello']:選擇屬性是title并且值是以hello開頭并且允許hello后面以-的任意字符
　　[title^='hello']:屬性以hello開頭的任意字符
　　[title$='hello']:屬性以hello結束的任意字符
　　[title^='hello'][title$='.py']:選擇屬性以hello開頭并且以.py結束的元素
 
連結符
　　h1~p:選擇h1元素后面的所有同級p元素
　　p~p:選擇p元素后面的所有同級p元素，除了第一個p元素
　　h1+p:選擇h1元素后面的第一個同級p元素
 
偽類選擇器
　　nth系列,數字
 
　　nth-child():按照位置來算數
　　nth-of-type():按照類型來算數
　　nth-last-child():從末尾按照位置開始算
　　nth-last-of-type():從末尾按照類型來算數
　　通過(-n+number)來指定選擇前幾個元素
　　-n會向負數方向增加先從0開始,-1,-2,-3...
　　使用:nth-child(odd)或:nth-child(even)實現隔行變色。
 
單個選擇
　　first-child:選擇第一個元素，按位置
　　first-of-type:選擇第一個元素，按類型
 
　　last-child:選擇最后一個元素，按位置
　　last-of-type:選擇最后一個元素，按類型
 
　　only-child:沒有其他兄弟元素的時候會被選中
　　only-of-type:可以有兄弟元素但要類型不同
　　使用only-of-type可以讓你從其他類型元素中挑選出一個元素來，反之only-child需要元素單獨存在才行。這個肯定有大作用，待發現。
 
偽類
 
:target

　　通過:target來模擬點擊事件

　　<a href="#a" id="a"></a>

　　利用target實現tab欄切換

　　使用target偽類，可以輕松地突出顯示用戶要閱讀的評論

利用target制作的tab切換，當然它還是有很多缺陷的，不過大家可以通過它擴展擴展。
:empty
　　選擇沒有子元素并且沒有文本節點的元素
:root
　　選擇根元素，在HTML中root永遠是html元素
:not
　　參數支持傳遞一個元素甚至其他偽類選擇器,但不支持傳遞連結符以及偽元素
　　選擇除了指定參數以外的任意元素
:optional
　　選擇不是必須填寫的input元素
　　也就是獲取到input沒有加required屬性的元素
:required
　　選擇有加required屬性的元素
:read-write
　　獲取可讀寫的input元素
:read-only
　　獲取只可讀的input元素
:out-of-range
　　當input元素的值是超出范圍時，max和min限定的范圍
:valid
　　選擇所有合法的輸入，適用于表單元素有限制，如最小輸入元素和屬性的最大值，電子郵件具有合法的電子郵件，或者數值等數字字段。
 
元素狀態偽類
:checked
　　當checkbox被選中時
:disabled
　　當元素被禁用時
:enabled
　　當元素沒有被禁用時
 
偽元素
::first-line
　　選擇第一行文字
::first-letter
　　選擇第一個字
::after
　　在元素末尾添加一個偽元素
::before
　　在元素開頭添加一個偽元素
::selection
　　應用到選中的文本上
 
合理利用這些選擇器，可以幫你解決很多問題，目前還在研究中，本篇內容長期更新。

文章出處
使用CSS計數器就像使用變量一樣。
 
它有以下幾個屬性：
　　counter-reset
　　創建或重置計數器
 
　　counter-increment
　　增長計數器
 
　　content
　　生成內容
 
　　counter()
　　將計數器的值添加到元素中
 
使用CSS計數器，我們必須首先創建它。
 
dome1
效果：
不過得注意一下，必須用偽元素來生產內容，不然不起效果。
這樣簡單的說一下原理，就是它有多少個元素添加了counter-increment:list;這個它就可以加1。
 
不相信的話我們可以再來看個東西，可以說明它不是按照元素的，而是根據counter-increment，如果它的值是一樣的就可以增加。
有了這個屬性，如果需要這種效果就不要去寫JS了。
 
如果你覺得你會了，那就錯了，其實還有很多坑，來看一個復雜點的。
 
　　這個好像沒有什么問題對吧，但我為什么要給body加呢？其實有原因的，再來看這個counter-reset，它表示創建或重置計數器，那么就有問題了，什么情況下它表示創建，什么情況下它表示重置？
　　以我的觀察是，當第一次使用counter-reset就表示創建，第二次表示重置，但要注意是同一個元素才會重置。body一個頁面只有一個，所有對于只需要增加而不需要重置的計數器就可以寫去body里面，當然也可以寫去其他元素里面，只要保證它是唯一的，當然這句話不是100%正確，不好描述，自己試試就懂了。
 
看最后一個例子。
 
這個你能理解，就差不多了，不能就自己多試幾次，也沒啥。
 
2016.09.22更新
這幾天在項目中都有用到這個技術，確實挺好用的，另外再講幾個小技巧。
 
利用計數器來實現獲取input checked選擇的數量。
怎么樣，還可以吧？
 
其實我們還可以自己手動更改counter-increment的數值大小，比如下面這個。
其代碼是這個
CSS：

body{
　　counter-reset:num;
}
input:nth-of-type(1):checked{
　　counter-increment:num 5;
}
input:nth-of-type(2):checked{
　　counter-increment:num 2;
}
input:nth-of-type(3):checked{
　　counter-increment:num 7;
}
input:nth-of-type(4):checked{
　　counter-increment:num 1;
}
div::after{
　　content:'Count ' counter(num);
}

HTML:

5<input type="checkbox">
2<input type="checkbox">
7<input type="checkbox">
1<input type="checkbox">
<div></div>

 通過這個可以很好的實現下面的這種效果。
注意除了后面的文字左邊的間距是一樣的。
我的實現方式是這樣的。
HTML：

<dl class="list">
　　<dt class="title">會員特權</dt>
　　<dd>每個在線商品均可享受成本價特惠購買，每個商品可享受5~200元不等的優惠力度</dd>
　　<dd>分享所有商品項目鏈接給朋友，朋友也可以享受優惠1~40元不等的優惠</dd>
　　<dd>更多特權敬請期待</dd>
</dl>

CSS：

dl{
　　margin:0 1.2rem;
}
dl>dt{
　　border-bottom:1px solid #dedede;
}
dl:first-of-type{
　　margin-top:20px;
}
.list{
　　counter-reset:list;
}
.list>dd{
　　line-height:2;
　　counter-increment:list;
　　font-family:sans-serif;
　　padding-left:1.2rem;
　　position:relative;
　　color:#999;
}
.list>dd::before{
　　content:counter(list) '. ';
　　position:absolute;
　　left:0;
　　top:0;
}

OK。
 
2016.09.25更新
最近發現counter還支持傳遞一個值用來改變顯示的序號如下。
代碼：

<style>
body,div{
　　margin:0;
　　padding:0;
}
ul{
　　list-style:none;
　　counter-reset:a;
}
li{
　　counter-increment: a;
}
li::before{
　　content:counter(a,cjk-ideographic) ' ';
}

</style>

<ul>
　　<li>CSS</li>
　　<li>Javascript</li>
　　<li>HTML5</li>
</ul>

這里用了“cjk-ideographic”它會按照大小數字來顯示。
那么這個值哪里來的呢？它就是“list-style-type”里面的值，更多你可以去找這里面的。還可以按照a，b，c的順序，這個也比較常用。
 

文章出處
實現原理利用:target，把a標簽自身的href以及id設置成一樣的。
 
案例1：實現元素的切換
HTML：

<div id="box">
　　<a href="#a" id="a">
　　　　<p>我是P1的內容</p>
　　</a>
　　<a href="#b" id="b">
　　　　<p>我是P2的內容</p>
　　</a>
</div>

CSS：

body,div{
　　margin:0;
　　padding:0;
}
#box>a{
　　display:none;
}
#box>a:first-of-type{
　　display:block;
}
#box>a:target{
　　display:none;
}
#box>a:target + a{
　　display:block;
}

效果
 
點擊后成這樣。
再次點擊
 
實現的原理就是先讓所有的a標簽隱藏，讓第一個顯示，當點擊的時候讓自己隱藏讓它的下一個兄弟元素顯示，其實這里有個坑，一開始實現這個效果的時候我以為會出問題，其實光這句話是不夠的，剛剛碰巧我使用了

#box>a:first-of-type{
　　display:block;
}

其實很關鍵，因為+號是匹配不了它的上一個兄弟元素的，不太好解釋，自己去想吧。
 
 
案例2：通過點擊事件結合模擬父元素選擇器使用可以看這篇文章：CSS中模擬父元素選擇器
 
案例3：利用target制作的tab切換可以看這篇文章：CSS3選擇器的研究，案例 ctrl+f 搜索target
 
另外一種tab的實現，通過結合z-index
HTML:

<ul class="tabs">
　　<li><a href="#tab1">標簽一</a></li>
　　<li><a href="#tab2">標簽二</a></li>
　　<li><a href="#tab3">標簽三</a></li>
</ul>
<div id="tab1" class="tab_content">
　　tab1
</div>
<div id="tab2" class="tab_content">
　　tab2
</div>
<div id="tab3" class="tab_content">
　　tab3
</div>

CSS:

.tab_content {
　　border: 1px solid #ccc;
　　background: #fff;
　　padding: 20px;
　　height: 250px;
　　position: absolute;
　　top: 150px;
　　left: 0;
　　width: 600px;
}
div:first-of-type{
　　z-index:1;
}
div:target{
　　z-index:1;
}

 效果：
當然還有其他可以做的，暫時沒想到，有新想法再更新。

文章出處
CSS Clip 裁剪
可以用它來裁剪一張圖片噢。
我們來裁剪一下Google圖標，把G字給裁剪下來。
注意這個clip得配合絕對定位才能使用，不然不起效果。
 

rect (top, right, bottom, left)

上，右，下，左

啥意思呢，比如說上面的clip:rect(0 140px 140px 0);這句話就表示我要裁剪一個從高0px到底部140px，從左0px到右140px像素的圖像。（更簡單來說就是我要裁剪一個高140像素寬140像素的圖像。不過這句話再某些情況下還不太正確，所以還是理解第一句話比好。）
 
我倒想起一個妙用，就是CSS精靈完全可以用這個來寫啊。
既然說了就實際一下哈。拿taobao精靈圖來說。
 
圖片長這樣
 
clip
ok，如果這你覺得沒啥，其實還有一個妙用，比如用戶上傳圖片，可能你得讓用戶裁剪把，這時候就可以用這個了。
這個我們是不是就可以配合JS來實現呢，你說呢。
 
如果你怕兼容問題，完全沒有問題，CSS2就支持了。

文章出處
這是一個比較正常的
但如果我們把寬度和高度去掉呢？
好像看不太出來對吧，我們來給邊框加上不同顏色。
看出啥了沒，分明就是每個邊都是一個三角形啊。
 
那假如我想要一個朝下的三角形是不是我只要把border-top給顯示出來，其他的隱藏就好了啊。OK，說干就干
transparent表示透明，所以可以當做隱藏來使用。你可能會說那直接只設置border-top不就好了嗎，但你可以發現是不行的，你試試就知道了。
 
單個：
代碼：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <style>
 7  #item1{
 8  width:0px;
 9  height:0px;
10  border:30px solid transparent;
11  border-top:30px solid red;
12 }
13  #item2{
14  width:0px;
15  height:0px;
16  border:30px solid transparent;
17  border-left:30px solid green;
18 }
19  #item3{
20  width:0px;
21  height:0px;
22  border:30px solid transparent;
23  border-bottom:30px solid pink;
24 }
25  #item4{
26  width:0px;
27  height:0px;
28  border:30px solid transparent;
29  border-right:30px solid lightblue;
30 }
31 </style>
32 </head>
33 <body>
34 <div id="item1"></div>
35 <div id="item2"></div>
36 <div id="item3"></div>
37 <div id="item4"></div>
38 </body>
39 </html>

 
 
兩個組合：
代碼：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <style>
 7  #item1{
 8  width:0px;
 9  height:0px;
10  border:30px solid transparent;
11  border-top:30px solid red;
12  border-right:30px solid red;
13 }
14  #item2{
15  width:0px;
16  height:0px;
17  border:30px solid transparent;
18  border-top:30px solid green;
19  border-left:30px solid green;
20 }
21  #item3{
22  width:0px;
23  height:0px;
24  border:30px solid transparent;
25  border-top:30px solid pink;
26  border-bottom:30px solid pink;
27 }
28  #item4{
29  width:0px;
30  height:0px;
31  border:30px solid transparent;
32  border-right:30px solid lightblue;
33  border-bottom:30px solid lightblue;
34 }
35  #item5{
36  width:0px;
37  height:0px;
38  border:30px solid transparent;
39  border-right:30px solid lightsalmon;
40  border-left:30px solid lightsalmon;
41 }
42  #item6{
43  width:0px;
44  height:0px;
45  border:30px solid transparent;
46  border-bottom:30px solid red;
47  border-left:30px solid red;
48 } 
49 </style>
50 </head>
51 <body>
52 <div id="item1"></div>
53 <div id="item2"></div>
54 <div id="item3"></div>
55 <div id="item4"></div>
56 <div id="item5"></div>
57 <div id="item6"></div>
58 </body>
59 </html>

 
三個組合：
代碼：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <style>
 7  #item1{
 8  width:0px;
 9  height:0px;
10  border-left:30px solid transparent;
11 
12  border-top:30px solid red;
13  border-right:30px solid red;
14  border-bottom:30px solid red;
15 }
16  #item2{
17  width:0px;
18  height:0px;
19  border-bottom:30px solid transparent;
20 
21  border-top:30px solid green;
22  border-right:30px solid green;
23  border-left:30px solid green;
24 }
25  #item3{
26  width:0px;
27  height:0px;
28  border-right:30px solid transparent;
29 
30  border-top:30px solid pink;
31  border-left:30px solid pink;
32  border-bottom:30px solid pink;
33 }
34  #item4{
35  width:0px;
36  height:0px;
37  border-top:30px solid transparent;
38 
39  border-right:30px solid lightblue;
40  border-left:30px solid lightblue;
41  border-bottom:30px solid lightblue;
42 }
43 </style>
44 </head>
45 <body>
46 <div id="item1"></div>
47 <div id="item2"></div>
48 <div id="item3"></div>
49 <div id="item4"></div>
50 </body>
51 </html>

 
配合寬度使用。
注意寬度別超過邊框長度。
平行四邊形
完。
 

文章出處
scaleX的妙用
案例1
效果：
HTML:
<a href="javascript:;">我有下劃線噢</a>

CSS:
a{
text-decoration:none;
position:relative;
padding-bottom:5px;
}
a::after{
content:'';
position:absolute;
left:0;
bottom:0;
width:100%;
height:2px;
background-color:red;
transform:scaleX(0);
transition:all .5s;
}
a:hover::after{
transform:scaleX(1);
}

案例2
效果：
HTML：
<a href="#a" id="a">我有下劃線噢</a>
<a href="#b" id="b">我有下劃線噢</a>
<a href="#c" id="c">我有下劃線噢</a>

CSS:
a{
text-decoration:none;
position:relative;
padding:10px;
border:1px solid #ccc;
}
a::after{
content:'';
position:absolute;
left:10px;
bottom:3px;
width:calc(100% - 20px);
height:1px;
background-color:red;
transform:scaleX(0);
transition:all .5s;
}
a:target::after{
transform:scaleX(1);
}

scaleY的妙用
案例1、配合animation制作loading
效果：
HTML：
<div id="box">
<i></i>
<i></i>
<i></i>
<i></i>
</div>

CSS:
#box{
position:relative;
}
#box>i{
position:absolute;
top:0;
width:4px;
height:35px;
background-color:#0bac84;
border-radius:5px;
}
#box>i:nth-of-type(1){
left:0px;
animation:loading 1s ease-in .1s infinite;
}
#box>i:nth-of-type(2){
left:8px;
animation:loading 1s ease-in .3s infinite;
}
#box>i:nth-of-type(3){
left:16px;
animation:loading 1s ease-in .6s infinite;
}
#box>i:nth-of-type(4){
left:24px;
animation:loading 1s ease-in .3s infinite;
}
@keyframes loading{
0%{
transform:scaleY(1);
}
50%{
transform:scaleY(0.5);
}
100%{
transform:scaleY(1);
}
}

translate的妙用
案例1、在不知道高度的情況下實現垂直居中
效果：
HTML：
<div id="box">
translate
</div>

CSS:
#box{
position:absolute;
left:50%;
top:50%;
width:100px;
height:100px;
/*margin-left:-50px;
margin-top:-50px;*/
transform:translate(-50%,-50%);
background-color:red;
}

我認為translate是根據元素的寬度和高度來計算的。也就是說如果寫100%的話，實際上就是100px而我寫了-50%就是它的一半所以和margin-left:-50px;效果是一樣的。

文章出處

介紹一款讓文字會飛的插件

看效果:
github
下載完引入對應的css和JS文件，使用的時候加上對應的class就ok了。必須加上txtwav這個class，然后再加一個你想要的效果的class。這個class可以看上面那個圖片，黑色的那幾個大字就是對應的class。
比如這個：
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="dist/css/txt.wav.min.css">
<script src="dist/js/txt.wav.min.js" defer="defer"></script>
</head>
<body>
<h1 class="txtwav vibe">我要飛得更高！</h1>
</body>
</html>
完。

文章出處

古代書寫方式都是垂直方向上的，如果要實現這種效果的話，還是挺麻煩的，不過現在CSS3有一個"writing-mode"屬性，它可以改變文字的書寫方式。

writing-mode：horizontal-tb | vertical-rl | vertical-lr
horizontal-tb：
vertical-lr：
vertical-rl：
有了這個屬性，以后實現豎排效果就很方便了。

文章出處

outline具有和border很相似的屬性，但多少又有些區別，就是因為這些區別才讓它閃閃發光，先目睹一下。

<style>
div{
width:100px;
height:100px;
background-color:red;
outline:10px solid #ccc;
}
</style>
<div></div>
好像和“border”沒啥區別，那么看下面這張圖
它的寬和高還是100px，并沒有增加邊框的寬度。
也就是說：outline不占據布局空間，不會影響元素的尺寸，如果是這樣的話，那可是可以解決很多問題啊，比如一個圖片默認沒有邊框，hover的時候有一個1px的邊框，那么如果不做處理盒子會抖動一下，解決這個問題可能就是默認給一個白色的邊框或者給個padding，但是有了outline就好辦了，直接寫就好了。
來研究一下它是不是真的不據布局空間。
它把下面的文字蓋住了，但并沒有改變元素的布局方式，這足夠說明它確實是不占位置的。
outline還有一個強大的屬性叫outline-offset可以設置邊框的偏移量。
<style>
div{
margin:100px;
width:100px;
outline:1px solid red;
outline-offset:10px;
}
</style>
<div>追夢子</div>
值也可以是負的。
利用outline制作炫酷效果
代碼如下：
<style>
div{
margin:100px;
display:inline-block;
position:relative;
}
div::after{
content:'';
position:absolute;
left:-50px;
top:-100px;
width:100%;
height:100%;
outline:0px solid #fff;
outline-offset:15px;
transition:all .5s;
}
div:hover::after{
left:0px;
top:0px;
outline:1px solid currentColor;
outline-offset:3px;
}
</style>
<div>追夢子</div>
可以同時設置“border”和“outline”
<style>
div{
margin:100px;
width:100px;
border:1px solid red;
outline:1px solid red;
outline-offset:10px;
}
</style>
<div>追夢子</div>

不過值得注意的是，outline不會繼承border-radius。

outline結合offset制作十字架
<style>
div{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: red;
outline: 34px dotted #fff;
outline-offset: -33px;
}
</style>
<div></div>
<style>
div{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: red;
position:relative;
}
div::after{
content:'';
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
outline: 31px outset #fff;
outline-offset: -80px;
}
</style>
<div></div>