歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
html
css
4種非常實用的CSS代碼段,你都學會了嗎?
4種非常實用的CSS代碼段,你都學會了嗎?
如果你看上圖代碼沒有看懂,請看下圖,我注釋掉一行代碼,你就明白了。原來是dot元素,沿著Y軸在循環位移,隱藏掉就讓你看到了加載的動畫效果。
4種非常實用的CSS代碼段,你都學會了嗎?
4種非常實用的CSS代碼段,你都學會了嗎?
4種非常實用的CSS代碼段,你都學會了嗎?
4種非常實用的CSS代碼段,你都學會了嗎?
當你需要這樣一個上傳文件,按鈕時,你考慮的是找設計弄個圖片,還是自己寫一個???
其實CSS寫,也很簡單的。
4種非常實用的CSS代碼段,你都學會了嗎?
4種非常實用的CSS代碼段,你都學會了嗎?
當我們想給一個矩形或其他能用 border-radius 生成的形狀加投影時,用 box-shadow 都可以解決,如下圖:
4種非常實用的CSS代碼段,你都學會了嗎?
4種非常實用的CSS代碼段,你都學會了嗎?
但是,當元素添加了一些偽元素或半透明的裝飾之后,box-shadow就有些 力不從心了,因為 border-radius 會無恥地忽視透明部分。這類情況包括下列幾種情況:
1、半透明圖像、背景圖像、或者 border-image(比如老式的金質像框);
2、元素設置了點狀、虛線或半透明的邊框,但沒有背景(或者當 background-clip 不是 border-box 時);
3、對話氣泡,它的小尾巴通常是用偽元素生成的;
4、幾乎所有的折角效果
5、通過 clip-path 生成的形狀。
下面來看看這個示例: html代碼
css樣式
4種非常實用的CSS代碼段,你都學會了嗎?
4種非常實用的CSS代碼段,你都學會了嗎?
從上圖可以看出box-shadow搞不定的,drop-shadow給搞定了。這是為什么了?
4種非常實用的CSS代碼段,你都學會了嗎?
4種非常實用的CSS代碼段,你都學會了嗎?
可以很明顯的看出區別,為什么會這樣呢?在這里我用的是div標簽,大家都知道,div標簽是個塊標簽,說白了是個盒模型,指的是一塊區域,box-shadow的屬性只能添加到盒模型外面,因此內部的東西是不會添加上的,就變成上圖的樣子,中間還是白色部分。而drop-shadow就不一樣了,他是把所有的非透明區域都做了陰影效果,就相當于一種真正的投影。
經常在網頁中看到一些Dialog,例如有些網頁點擊登錄注冊時就會跳出一個彈框來顯示登錄注冊頁面,下面就使用 css 完成一個可以自適應,無論窗口的大小,始終能保持水平垂直居中的dialog。
css樣式
4種非常實用的CSS代碼段,你都學會了嗎?
4種非常實用的CSS代碼段,你都學會了嗎?
這些CSS都是非常實用的,有興趣的可以收藏起來,沒準以后能用上。然后drop-shadow就不用去糾結IE能不能用了,因為我們已經放棄它了。

如需轉載,請注明文章出處和來源網址:http://www.589004.tw/css3-style/c58309.shtml

金龙策略配资