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

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

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

投影 單側投影

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

鄰邊投影

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

雙側投影

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 屬性是一樣的，但不包括擴張半徑，不包括 inset 關鍵字，也不支持逗號分割的多層投影語法

毛玻璃效果

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云服務器 css效果效果顯示 css jquery 氣球css js效果 js和css效果圖

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

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

css揭秘筆記——視覺效果

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

skinner 2019-08-29 13:48 評論0 收藏0
css-secrets (css揭秘) 知識點目錄，值得深入學習！

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

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

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

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

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

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

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

liuyix 2019-08-30 11:08 評論0 收藏0