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

AWang 發(fā)布于2019-08-30 15:54 / 3612人閱讀

摘要：投影單側(cè)投影鄰邊投影雙側(cè)投影模糊距離陰影尺寸不規(guī)則投影濾鏡可接受的參數(shù)基本上跟屬性是一樣的，但不包括擴(kuò)張半徑，不包括關(guān)鍵字，也不支持逗號(hào)分割的多層投影語(yǔ)法毛玻璃效果折角效果

投影 單側(cè)投影

box-shadow:0px 10px 10px -5px black;

鄰邊投影

box-shadow:10px 10px 10px 2px black;

雙側(cè)投影

box-shadow:10px 0px 10px -10px black,
          -10px 0px 10px -10px black;

box-shadow: h-shadow v-shadow blur/*模糊距離*/ spread/*陰影尺寸*/ color inset;

不規(guī)則投影

filter:drop-shadow() grayscale blur();

*：drop-shadow() 濾鏡可接受的參數(shù)基本上跟 box-shadow 屬性是一樣的，但不包括擴(kuò)張半徑，不包括 inset 關(guān)鍵字，也不支持逗號(hào)分割的多層投影語(yǔ)法

毛玻璃效果

body,main::before{
    background: url(./1.jpg) 0 / cover fixed;
}
main{
    background: hsla(0, 0%, 100%, .3);
    width: 200px;
    height:    200px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

main::before{
    content: "";
    position: absolute;
    top:0;right: 0;bottom: 0;left: 0;
    z-index: -1;
    filter: blur(20px);
    margin: -30px;
}

折角效果

......

GPU云服務(wù)器云服務(wù)器 css效果效果顯示 css jquery 氣球css js效果 js和css效果圖

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/116807.html

相關(guān)文章

css揭秘筆記——視覺效果

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

skinner 2019-08-29 13:48 評(píng)論0 收藏0
css-secrets (css揭秘) 知識(shí)點(diǎn)目錄，值得深入學(xué)習(xí)！

摘要：通過模糊來弱化背景和滾動(dòng)提示使用兩層背景，控制交互式的圖片對(duì)比控件范圍輸入控件方式書中有很詳細(xì)的解答提醒自己要回顧。 1. 第一章 css編碼技巧第二章邊框與背景半透明邊框 hsla 多重邊框 box-shadow outline 靈活的背景定位 background-position css3該屬性可以指定偏移量，////bac...

DevWiki 2019-08-30 15:56 評(píng)論0 收藏0
《CSS揭秘》：切角效果

摘要：切角效果切角效果是一種常見的視覺風(fēng)格設(shè)計(jì)。但是現(xiàn)在在里，依然無(wú)法簡(jiǎn)單的生成切角效果。原文位于揭秘切角效果。裁切路徑方案使用裁切路徑可以在裁切任意多邊形，下面的代碼可以切除和上文一樣的效果。改變切角深度時(shí)需要同時(shí)改變個(gè)地方。切角效果切角效果是一種常見的視覺風(fēng)格設(shè)計(jì)。但是現(xiàn)在在CSS里，依然無(wú)法簡(jiǎn)單的生成切角效果。 css漸變使用CSS漸變[linear-parent][1]可以形成...

JerryZou 2019-08-29 11:18 評(píng)論0 收藏0
css編碼技巧【css揭秘讀書筆記】

摘要：最近在看揭秘，于是寫了文章來作筆記，除此以外還會(huì)補(bǔ)充一些自己遇到的筆試題。舉例說明以上的代碼有什么問題呢如果需要改變字號(hào)，那么同時(shí)需要調(diào)整行高。那么經(jīng)過修改后的代碼如下關(guān)于使用還是還是百分比，需要根據(jù)具體情況來決定。最近在看《css揭秘》，于是寫了文章來作筆記，除此以外還會(huì)補(bǔ)充一些自己遇到的筆試題。希望大家都有所收獲。 css編碼技巧盡量減少代碼重復(fù) 在實(shí)踐中，代碼可維護(hù)性的最大要...

Miyang 2019-08-30 12:59 評(píng)論0 收藏0
CSS揭秘之多重邊框

摘要：多重邊框的兩種實(shí)現(xiàn)方案以由逗號(hào)分隔的列表來描述一個(gè)或多個(gè)陰影效果。輪廓與邊框在以下幾個(gè)方面存在不同輪廓不占據(jù)空間，它們被描繪于內(nèi)容之上輪廓可以是非矩形的。是元素的輪廓，懸浮在元素邊框之上。也就是說，它們之間的顏色會(huì)繼承父元素的背景色。多重邊框的兩種實(shí)現(xiàn)方案： border-shadow outline Mutiple border ...

liuyix 2019-08-30 11:08 評(píng)論0 收藏0