CSS3你可能不知道的冷知識

小鱼儿码报资料:樣式計算

码报开奖结果本期 www.iwqgw.icu 在CSS中也可以進行簡單的計算 
通過calc函數可以實現 
這樣還可以使我們的元素自適應 
當然計算的值應該是合法的值

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

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

模糊文字

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

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

其實就是利用了我們熟悉的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);}12345678910111234567891011

指針事件

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

a {    pointer-events: none;}123123

添加了這個樣式后,鏈接就會失效 
甚至鼠標懸浮在這個鏈接上都不會變成pointer的光標樣式

書寫模式

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

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

元素裁剪

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

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

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

來源:CSDN


上一篇: Weex團隊負責人:我眼中的Weex和Weex開源那些事

下一篇: 怎么學JavaScript?

分享到: 更多
好的时时彩计划软件 黑龙江时时20选5走势 qq票秒速时时网页计划 欢乐生肖走势图360 竞彩足球比分即时比分 全民彩票合法吗 彩票助赢软件手机网页 彩神幸运飞艇冠军5码app 一全网最早原创36码特开 pk10精准人工计划软件 重庆时时直播 重庆时时计划教学 上海时时开奖走势图百度百度贴吧 pk10如何将100玩到一万 北京pk赛车走势软件 pk10最牛稳赚模式最新