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

來源:互聯網
上載者:User

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

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

樣式計算

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

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

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

模糊文字

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

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

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

多重邊框

可能我們利用border和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瀏覽器上使用這個屬性時
發現它和背景圖片的裁剪還不太一樣
四個像素值雖然同樣分別對應上右下左
但是只有第一個值(上)和最後一個值(左)是指定裁剪多大的尺寸
而第二個值(右)和第三個值(下)更像是保留多大的尺寸
由於不常用,這裡就不細說了
感興趣的同學可以在瀏覽器上調試一下

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

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.