国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

《CSS揭秘》:?jiǎn)蝹?cè)投影

superw / 679人閱讀

摘要:?jiǎn)蝹?cè)投影可以實(shí)現(xiàn)一種優(yōu)雅而又真實(shí)的效果。縮小投影的尺寸。如此我們可以簡(jiǎn)單的創(chuàng)建單側(cè)投影鄰邊投影鄰邊投影比較好解決雙側(cè)投影雙側(cè)投影沒(méi)有簡(jiǎn)單的半分,唯一的方案是把單側(cè)投影運(yùn)用兩次

單側(cè)投影可以實(shí)現(xiàn)一種優(yōu)雅而又真實(shí)的效果。

單側(cè)投影

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

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

把它向右移動(dòng)2px,向下移動(dòng)3px

對(duì)它進(jìn)行4px模糊算法。

縮小投影的尺寸。

模糊后的矩形和原始元素交集的部分被剔除
如果第三個(gè)參數(shù)和第四個(gè)參數(shù)相反,我們就看不到任何投影,除非用偏移量移動(dòng)投影。如此我們可以簡(jiǎn)單的創(chuàng)建單側(cè)投影

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

鄰邊投影

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

雙側(cè)投影

雙側(cè)投影沒(méi)有簡(jiǎn)單的半分,唯一的方案是把單側(cè)投影運(yùn)用兩次

</>復(fù)制代碼

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

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/111607.html

相關(guān)文章

  • [CSS]《CSS揭秘》第四章——視覺(jué)效果

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

    AWang 評(píng)論0 收藏0
  • css揭秘筆記——視覺(jué)效果

    摘要:實(shí)現(xiàn)染色效果的混合模式是,它會(huì)保留上層元素的高亮信息,并從它的下層吸取色相和飽和度信息。當(dāng)我們只有一個(gè)背景圖像及一個(gè)透明背景色時(shí),就不會(huì)有任何混合效果。 投影 知識(shí)點(diǎn) box-shadow: [inset]? 注意: 在元素正下方的投影被裁切掉了,是沒(méi)有的;而text-shadow不同,文字下方的投影不會(huì)被裁切。 box-shadow的第三個(gè)參數(shù)是模糊半徑,假如設(shè)置4px...

    skinner 評(píng)論0 收藏0
  • 你所不知道的 CSS 負(fù)值技巧與細(xì)節(jié)

    摘要:大家最為熟知的就是負(fù),使用負(fù)的,可以用來(lái)實(shí)現(xiàn)類似多列等高布局垂直居中等等。那還有沒(méi)有其他一些有意思的負(fù)值使用技巧呢下文就再介紹一些負(fù)值有意思的使用場(chǎng)景。但是希望無(wú)論左側(cè)內(nèi)容較多還是右側(cè)內(nèi)容較多,兩欄的高度始終保持一致。 寫本文的起因是,一天在群里有同學(xué)說(shuō)誤打誤撞下,使用負(fù)的 outline-offset 實(shí)現(xiàn)了加號(hào)。嗯?好奇的我馬上也動(dòng)手嘗試了下,到底是如何使用負(fù)的 outline-o...

    FrozenMap 評(píng)論0 收藏0
  • 精彩文章賞析 - 收藏集 - 掘金

    摘要:掘金原文地址譯文出自掘金翻譯計(jì)劃譯者請(qǐng)持續(xù)關(guān)注中文維護(hù)鏈接獲取最新內(nèi)容。由于以下的瀏覽器市場(chǎng)份額已逐年下降,所以對(duì)于瀏覽器技巧三視覺(jué)效果前端掘金揭秘學(xué)習(xí)筆記系列,記錄和分享各種實(shí)用技巧,共同進(jìn)步。 沉浸式學(xué) Git - 前端 - 掘金目錄 設(shè)置 再談設(shè)置 創(chuàng)建項(xiàng)目 檢查狀態(tài) 做更改 暫存更改 暫存與提交 提交更改 更改而非文件 歷史 別名 獲得舊版本 給版本打標(biāo)簽 撤銷本地更改... ...

    godiscoder 評(píng)論0 收藏0
  • 你所不知道的 CSS 陰影技巧與細(xì)節(jié)

    摘要:本文的題目是陰影技巧與細(xì)節(jié)。立體投影好,我們繼續(xù)。下一個(gè)主題是立體投影。但是,使用它們生成的陰影通常只能是單色或者同色系的。你這么說(shuō),難道還可以生成漸變色的陰影不成額,當(dāng)然不行。 關(guān)于 CSS 陰影,之前已經(jīng)有寫過(guò)一篇,box-shadow 與 filter:drop-shadow 詳解及奇技淫巧,介紹了一些關(guān)于 box-shadow 的用法。 最近一個(gè)新的項(xiàng)目,CSS-Inspira...

    supernavy 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<