《CSS揭秘》：單側投影

superw 發布于2019-08-29 11:22 / 666人閱讀

摘要：單側投影可以實現一種優雅而又真實的效果。縮小投影的尺寸。如此我們可以簡單的創建單側投影鄰邊投影鄰邊投影比較好解決雙側投影雙側投影沒有簡單的半分，唯一的方案是把單側投影運用兩次

單側投影可以實現一種優雅而又真實的效果。

單側投影

box-shadow: 2px 3px 4px -4px rgba(0,0,0.5);
以上代碼可以簡單理解為：

以該元素所在的位置和尺寸，畫一個rgba(0,0,0.5)的矩形

把它向右移動2px，向下移動3px

對它進行4px模糊算法。

縮小投影的尺寸。

模糊后的矩形和原始元素交集的部分被剔除
如果第三個參數和第四個參數相反，我們就看不到任何投影，除非用偏移量移動投影。如此我們可以簡單的創建單側投影

box-shadow: 0px 5px 4px -4px rgba(0,0,0.5);

鄰邊投影

鄰邊投影比較好解決
box-shadow: 5px 5px 4px rgba(0,0,0.5);

雙側投影

雙側投影沒有簡單的半分，唯一的方案是把單側投影運用兩次

box-shadow: 5px 0 5px -5px rgba(0,0,0.5),
           -5px 0 5px -5px rgba(0,0,0.5);

云服務器 GPU云服務器單側大揭秘揭秘云存儲云計算揭秘

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111607.html

[CSS]《CSS揭秘》第四章——視覺效果

摘要：投影單側投影鄰邊投影雙側投影模糊距離陰影尺寸不規則投影濾鏡可接受的參數基本上跟屬性是一樣的，但不包括擴張半徑，不包括關鍵字，也不支持逗號分割的多層投影語法毛玻璃效果折角效果投影單側投影 box-shadow:0px 10px 10px -5px black; showImg(https://segmentfault.com/img/bVbcVC8?w=345&h=352); 鄰邊投...

AWang 2019-08-30 15:54 評論0 收藏0
css揭秘筆記——視覺效果

摘要：實現染色效果的混合模式是，它會保留上層元素的高亮信息，并從它的下層吸取色相和飽和度信息。當我們只有一個背景圖像及一個透明背景色時，就不會有任何混合效果。投影知識點 box-shadow: [inset]? 注意：在元素正下方的投影被裁切掉了，是沒有的；而text-shadow不同，文字下方的投影不會被裁切。 box-shadow的第三個參數是模糊半徑，假如設置4px...

skinner 2019-08-29 13:48 評論0 收藏0
你所不知道的 CSS 負值技巧與細節

摘要：大家最為熟知的就是負，使用負的，可以用來實現類似多列等高布局垂直居中等等。那還有沒有其他一些有意思的負值使用技巧呢下文就再介紹一些負值有意思的使用場景。但是希望無論左側內容較多還是右側內容較多，兩欄的高度始終保持一致。寫本文的起因是，一天在群里有同學說誤打誤撞下，使用負的 outline-offset 實現了加號。嗯？好奇的我馬上也動手嘗試了下，到底是如何使用負的 outline-o...

FrozenMap 2019-08-30 15:44 評論0 收藏0
精彩文章賞析 - 收藏集 - 掘金

摘要：掘金原文地址譯文出自掘金翻譯計劃譯者請持續關注中文維護鏈接獲取最新內容。由于以下的瀏覽器市場份額已逐年下降，所以對于瀏覽器技巧三視覺效果前端掘金揭秘學習筆記系列，記錄和分享各種實用技巧，共同進步。沉浸式學 Git - 前端 - 掘金目錄設置再談設置創建項目檢查狀態做更改暫存更改暫存與提交提交更改更改而非文件歷史別名獲得舊版本給版本打標簽撤銷本地更改... ...

godiscoder 2019-08-20 18:09 評論0 收藏0
你所不知道的 CSS 陰影技巧與細節

摘要：本文的題目是陰影技巧與細節。立體投影好，我們繼續。下一個主題是立體投影。但是，使用它們生成的陰影通常只能是單色或者同色系的。你這么說，難道還可以生成漸變色的陰影不成額，當然不行。關于 CSS 陰影，之前已經有寫過一篇，box-shadow 與 filter:drop-shadow 詳解及奇技淫巧，介紹了一些關于 box-shadow 的用法。最近一個新的項目，CSS-Inspira...

supernavy 2019-08-29 17:12 評論0 收藏0