CSS3中有一些你不知道的冷知識

可能我們在看一些網頁的源碼時 

會發現自己從來沒見過的屬性或用法
今天我就來總結一下
CSS3的冷知識

樣式計算

在CSS中也可以進行簡單的計算
透過calc函數可以實作
這樣還可以使我們的元素自適應
當然計算的值應該是合法的值

.demo {    ...
    width: calc(100% - 500px);    height: 200px;}

這個demo中，元素的寬度值是父元素寬度減去500像素
如果父元素是body
改變視窗的大小，它的寬度也會隨之改變

#模糊文字

#兩行簡單的程式碼就可以實現模糊文字的效果

.demo {    ...
    color: transparent;    text-shadow: black 0 0 2px;}

其實就是利用了我們熟悉的text-shadow配合前景色透明
實現類似濾鏡的效果

多重邊框

可能我們利用b order和outline可以實現兩層邊框
其實我們可以利用盒陰影實現多重邊框的效果

.demo {    ...
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.2), 
                0 0 0 20px rgba(0, 0, 0, 0.2), 
                0 0 0 30px rgba(0, 0, 0, 0.2), 
                0 0 0 40px rgba(0, 0, 0, 0.2),                0 0 0 50px rgba(0, 0, 0, 0.2),                0 0 0 60px rgba(0, 0, 0, 0.2),                0 0 0 70px rgba(0, 0, 0, 0.2),                0 0 0 80px rgba(0, 0, 0, 0.2);}

指標事件

pointer-events屬性可以讓我們控制遊標在滑鼠點擊、拖曳等事件的行為

a {    pointer-events: none;}

新增了這個樣式後，連結就會失效
甚至滑鼠懸浮在這個連結上都不會變成pointer的遊標樣式

書寫模式

writing-mode屬性用於指定書寫模式
這個屬性是為了解決不是所有語言都是從左到右的書寫習慣
比如說我想指定書寫模式垂直方向從右向左

.demo {    width: 100px;    height: 100px;    writing-mode: vertical-rl;    border: 1px solid black;}

元素裁剪

可能我們用過對圖片裁剪的屬性background-clip
但其實css可以對元素裁剪
就是用clip屬性
不過好像真的不常用
這個屬性很嬌氣
它只有在absolute或fixed定位的時候才生效
這個屬性這樣用

.demo {    ...
    position: absolute;    clip: rect(20px,140px,140px,20px);}

不過我在chrome瀏覽器上使用這個屬性時
發現它和背景圖片的裁剪還不太一樣
四個像素值雖然同樣分別對應上右下左
但是只有第一個值（上）和最後一個值（左）是指定裁剪多大的尺寸
而第二個值（右）和第三個值（下）更像是保留多大的尺寸
由於不常用，這裡就不細說了
有興趣的同學可以在瀏覽器上調試一下

---

暫時寫這些
以後再想到什麼
整理在這裡

以上是CSS3中有一些你不知道的冷知識的詳細內容。更多資訊請關注PHP中文網其他相關文章！