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

資訊專欄INFORMATION COLUMN

CSS視覺效果

AlphaGooo / 2261人閱讀

摘要：視覺效果投影的繪畫機(jī)制當(dāng)為一個(gè)元素添加時(shí)，我們便會(huì)從視覺上得到一個(gè)投影的效果。雙側(cè)投影目前為止，還無法指定投影在水平方向上放大，而在垂直方向上縮小，要實(shí)現(xiàn)雙側(cè)投影的效果唯一的辦法就是使用兩塊投影來達(dá)到目的。

title: CSS視覺效果
date: 2016-12-17
tags: CSS Secrets

0x00 投影的繪畫機(jī)制

當(dāng)為一個(gè)元素添加 box-shadow 時(shí)，我們便會(huì)從視覺上得到一個(gè)投影的效果。

比如:

#box{
    width: 100px;
    height: 100px;
    background: deeppink;
    box-shadow: 5px 6px 4px rgba(0,0,0,0.5);
}

我們對(duì) div#box 添加了 box-shadow 屬性，并指定了三個(gè)長度值和一個(gè)顏色值。對(duì)于這樣的用法，我們?cè)偈煜げ贿^了。要得到上圖的效果，瀏覽器渲染引擎其實(shí)進(jìn)行了四步：

以該元素相同的位置和尺寸，畫一個(gè) rgba(0,0,0,0.5) 的矩形。

把它向右偏移 5px，向下偏移 6px。

使用高斯模糊算法對(duì)其進(jìn)行 4px 的模糊處理。

模糊后的矩形與原始元素的交集部分會(huì)被裁切掉。

所以，從投影繪制的機(jī)制來看，繪制的投影其實(shí)是在元素的上層的。

單側(cè)投影

box-shadow 鮮為人知的第四個(gè)參數(shù)，稱為 _擴(kuò)張半徑_。這個(gè)參數(shù)會(huì)根據(jù)指定的值去擴(kuò)大(當(dāng)指定負(fù)值時(shí))或縮小投影的尺寸。比如，一個(gè) -5px 的擴(kuò)張半徑會(huì)把投影的寬度和高度各減少 10px （即每邊各 5px）。

那么，當(dāng)應(yīng)用一個(gè)負(fù)的擴(kuò)張半徑，而它的值剛好等于模糊半徑，那么投影的尺寸就會(huì)與投影所屬元素的尺寸一致，如果不使用偏移參數(shù)來移動(dòng)它，將看不見任何投影。

這正是我們想要的。

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

我們給了投影一個(gè)正的垂直偏移量，而在另外三側(cè)是沒有投影的。

雙側(cè)投影

目前為止，還無法指定投影在水平方向上放大，而在垂直方向上縮小，要實(shí)現(xiàn)雙側(cè)投影的效果唯一的辦法就是使用兩塊投影來達(dá)到目的。

box-shadow: 6px 0px 5px -4px yellow,
            -6px 0px 5px -4px green;

未完待續(xù)。。。

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

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

相關(guān)文章

  • 「CSS3 」3D效果 & 透視

    摘要：第一種方法將屬性更改為的數(shù)值，便可以將這個(gè)空間設(shè)置為透視投影，即所有子元素僅僅是不包括自身的投影到屏幕的方式變?yōu)橥敢曂队啊Ｗ⒁猓@個(gè)透視投影的像平面和平面是重合的，原理圖如下其中，焦點(diǎn)到平面的距離是的值。 隨著瀏覽器的不斷進(jìn)步和更新，許多的新特性也嶄露頭角。許許多多以前需要用 gif 圖片或者是 flash 實(shí)現(xiàn)的效果，現(xiàn)在使用 CSS 就可以實(shí)現(xiàn)了。消耗部分計(jì)算能力，從而大大減少了流...

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

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

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

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

  • css實(shí)現(xiàn)的一些視覺效果

    摘要：鄰邊投影雙側(cè)投影用兩塊投影每邊各一塊來實(shí)現(xiàn)不規(guī)則投影解決辦法是使用濾鏡效果，。濾鏡，它會(huì)給圖片增加一種降飽和度的橙黃色染色效果。實(shí)現(xiàn)方式毛玻璃效果折角效果折角的解決方案增加一個(gè)暗色的三角形來實(shí)現(xiàn)翻折效果。 投影 1.單側(cè)投影思路是box-shadow 的第四個(gè)長度參數(shù)。它排在模糊半徑參數(shù)之后，稱作擴(kuò)張半徑。這個(gè)參數(shù)會(huì)根據(jù)你指定的值去擴(kuò)大或當(dāng)指定負(fù)值時(shí)，縮小投影的尺寸。例如，一個(gè)-5px...

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

  • 關(guān)于移動(dòng)端適配，你必須要知道的

    摘要：需要注意，上面的尺寸都是屏幕對(duì)角線的長度英寸縮寫為在荷蘭語中的本意是大拇指，一英寸就是指甲底部普通人拇指的寬度。由于手機(jī)尺寸為手機(jī)對(duì)角線的長度，我們通常使用如下的方法計(jì)算的為那它每英寸約含有個(gè)物理像素點(diǎn)。 導(dǎo)讀 移動(dòng)端適配，是我們?cè)陂_發(fā)中經(jīng)常會(huì)遇到的，這里面可能會(huì)遇到非常多的問題： 1px問題 UI圖完美適配方案 iPhoneX適配方案 橫屏適配 高清屏圖片模糊問題 ... ...

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

  • 關(guān)于移動(dòng)端適配，你必須要知道的

    摘要：需要注意，上面的尺寸都是屏幕對(duì)角線的長度英寸縮寫為在荷蘭語中的本意是大拇指，一英寸就是指甲底部普通人拇指的寬度。由于手機(jī)尺寸為手機(jī)對(duì)角線的長度，我們通常使用如下的方法計(jì)算的為那它每英寸約含有個(gè)物理像素點(diǎn)。 導(dǎo)讀 移動(dòng)端適配，是我們?cè)陂_發(fā)中經(jīng)常會(huì)遇到的，這里面可能會(huì)遇到非常多的問題： 1px問題 UI圖完美適配方案 iPhoneX適配方案 橫屏適配 高清屏圖片模糊問題 ... ...

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

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

0條評(píng)論

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