資訊專欄INFORMATION COLUMN
摘要：視覺效果投影的繪畫機制當為一個元素添加時，我們便會從視覺上得到一個投影的效果。雙側(cè)投影目前為止，還無法指定投影在水平方向上放大，而在垂直方向上縮小，要實現(xiàn)雙側(cè)投影的效果唯一的辦法就是使用兩塊投影來達到目的。
title: CSS視覺效果
date: 2016-12-17
tags: CSS Secrets
當為一個元素添加 box-shadow 時，我們便會從視覺上得到一個投影的效果。
比如:
#box{
width: 100px;
height: 100px;
background: deeppink;
box-shadow: 5px 6px 4px rgba(0,0,0,0.5);
}
我們對 div#box 添加了 box-shadow 屬性，并指定了三個長度值和一個顏色值。對于這樣的用法，我們再熟悉不過了。要得到上圖的效果，瀏覽器渲染引擎其實進行了四步：
以該元素相同的位置和尺寸，畫一個 rgba(0,0,0,0.5) 的矩形。
把它向右偏移 5px，向下偏移 6px。
使用高斯模糊算法對其進行 4px 的模糊處理。
模糊后的矩形與原始元素的交集部分會被裁切掉。
所以，從投影繪制的機制來看，繪制的投影其實是在元素的上層的。
單側(cè)投影box-shadow 鮮為人知的第四個參數(shù)，稱為 _擴張半徑_。這個參數(shù)會根據(jù)指定的值去擴大(當指定負值時)或縮小投影的尺寸。比如，一個 -5px 的擴張半徑會把投影的寬度和高度各減少 10px （即每邊各 5px）。
那么，當應(yīng)用一個負的擴張半徑，而它的值剛好等于模糊半徑，那么投影的尺寸就會與投影所屬元素的尺寸一致，如果不使用偏移參數(shù)來移動它，將看不見任何投影。
這正是我們想要的。
box-shadow: 0px 5px 4px -4px black;
我們給了投影一個正的垂直偏移量，而在另外三側(cè)是沒有投影的。
雙側(cè)投影目前為止，還無法指定投影在水平方向上放大，而在垂直方向上縮小，要實現(xiàn)雙側(cè)投影的效果唯一的辦法就是使用兩塊投影來達到目的。
box-shadow: 6px 0px 5px -4px yellow,
-6px 0px 5px -4px green;
未完待續(xù)。。。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115429.html
摘要：第一種方法將屬性更改為的數(shù)值，便可以將這個空間設(shè)置為透視投影，即所有子元素僅僅是不包括自身的投影到屏幕的方式變?yōu)橥敢曂队?。注意，這個透視投影的像平面和平面是重合的，原理圖如下其中，焦點到平面的距離是的值。 隨著瀏覽器的不斷進步和更新，許多的新特性也嶄露頭角。許許多多以前需要用 gif 圖片或者是 flash 實現(xiàn)的效果，現(xiàn)在使用 CSS 就可以實現(xiàn)了。消耗部分計算能力，從而大大減少了流...
摘要：投影單側(cè)投影鄰邊投影雙側(cè)投影模糊距離陰影尺寸不規(guī)則投影濾鏡可接受的參數(shù)基本上跟屬性是一樣的，但不包括擴張半徑，不包括關(guān)鍵字，也不支持逗號分割的多層投影語法毛玻璃效果折角效果 投影 單側(cè)投影 box-shadow:0px 10px 10px -5px black; showImg(https://segmentfault.com/img/bVbcVC8?w=345&h=352); 鄰邊投...
摘要：鄰邊投影雙側(cè)投影用兩塊投影每邊各一塊來實現(xiàn)不規(guī)則投影解決辦法是使用濾鏡效果，。濾鏡，它會給圖片增加一種降飽和度的橙黃色染色效果。實現(xiàn)方式毛玻璃效果折角效果折角的解決方案增加一個暗色的三角形來實現(xiàn)翻折效果。 投影 1.單側(cè)投影思路是box-shadow 的第四個長度參數(shù)。它排在模糊半徑參數(shù)之后，稱作擴張半徑。這個參數(shù)會根據(jù)你指定的值去擴大或當指定負值時，縮小投影的尺寸。例如，一個-5px...
摘要：需要注意，上面的尺寸都是屏幕對角線的長度英寸縮寫為在荷蘭語中的本意是大拇指，一英寸就是指甲底部普通人拇指的寬度。由于手機尺寸為手機對角線的長度，我們通常使用如下的方法計算的為那它每英寸約含有個物理像素點。 導(dǎo)讀 移動端適配，是我們在開發(fā)中經(jīng)常會遇到的，這里面可能會遇到非常多的問題： 1px問題 UI圖完美適配方案 iPhoneX適配方案 橫屏適配 高清屏圖片模糊問題 ... ...
摘要：需要注意，上面的尺寸都是屏幕對角線的長度英寸縮寫為在荷蘭語中的本意是大拇指，一英寸就是指甲底部普通人拇指的寬度。由于手機尺寸為手機對角線的長度，我們通常使用如下的方法計算的為那它每英寸約含有個物理像素點。 導(dǎo)讀 移動端適配，是我們在開發(fā)中經(jīng)常會遇到的，這里面可能會遇到非常多的問題： 1px問題 UI圖完美適配方案 iPhoneX適配方案 橫屏適配 高清屏圖片模糊問題 ... ...
閱讀 3754·2021-11-22 13:52
閱讀 3627·2019-12-27 12:20
閱讀 2400·2019-08-30 15:55
閱讀 2153·2019-08-30 15:44
閱讀 2271·2019-08-30 13:16
閱讀 584·2019-08-28 18:19
閱讀 1893·2019-08-26 11:58
閱讀 3447·2019-08-26 11:47
