CSS-‘迷人’的陰影

靜態(tài)頁(yè)面中，相信大家見(jiàn)過(guò)不少的具有陰影的文字或者容器。本來(lái)普普通通的一行文字，平淡出奇的一個(gè)div容器，但因?yàn)榧恿艘粋€(gè)陰影，一切就顯得不一樣了……

接下來(lái)，我們就來(lái)介紹一下css中的陰影：

一、盒子陰影（box-shadow）

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow 必需的。水平陰影的位置。允許負(fù)值

v-shadow 必需的。垂直陰影的位置。允許負(fù)值

blur 可選。模糊距離

spread 可選。陰影的大小

color 可選。陰影的顏色。在CSS顏色值尋找顏色值的完整列表

inset 可選。從外層的陰影（開(kāi)始時(shí)）改變陰影內(nèi)側(cè)陰影

一個(gè)陰影

注意：同一盒子是可以同時(shí)添加多個(gè)陰影的，每個(gè)陰影之間用" ，"隔開(kāi)。

兩個(gè)陰影，一個(gè)向外，一個(gè)向內(nèi)

二、文本陰影（text-shadow）

text-shadow: h-shadow v-shadow blur color;

h-shadow：表示水平偏移量，可為負(fù)值。為正，表示向右移，為負(fù)，表示向左移。

v-shadow：表示垂直偏移量，可為負(fù)值。為正，表示向上移，為負(fù)，表示向下移。

blur：陰影模糊程度，不能為負(fù)，但可以為0。值越大，陰影模糊程度越大。

color：陰影顏色，可以用rgba（）；

文本陰影

下面，我們借助上面所學(xué)，實(shí)現(xiàn)一個(gè)書(shū)本放在書(shū)桌上的效果：

書(shū)本陰影

利用陰影制做太陽(yáng)：

您2019豬事順利，心想事成。

前言

前面兩篇文章都有提到過(guò)box-shadow，里面也有很多的基礎(chǔ)知識(shí)，有看過(guò)的小伙伴應(yīng)該都有或多或少的收獲吧，今天我們?cè)購(gòu)幕A(chǔ)入手，希望能讓大家更熟悉它。

沒(méi)有看過(guò)之前文章的小伙伴請(qǐng)點(diǎn)擊：

CSS3 box-shadow實(shí)現(xiàn)背景動(dòng)畫(huà)

CSS3動(dòng)畫(huà)解析抖音 LOGO制作

下面我們從最基礎(chǔ)的開(kāi)始演示。

單側(cè)投影

關(guān)鍵點(diǎn): 1、外 box-shadow 前四個(gè)參數(shù)：x 偏移值、y 偏移值、模糊半徑、擴(kuò)張半徑。 2、單側(cè)投影的核心是第四個(gè)參數(shù)：擴(kuò)張半徑。這個(gè)參數(shù)會(huì)根據(jù)你指定的值去擴(kuò)大或縮小投影尺寸，如果我們用一個(gè)負(fù)的擴(kuò)張半徑，而他的值剛好等于模糊半徑，那么投影的尺寸就會(huì)與投影所屬的元素尺寸完全一致，除非使用偏移量來(lái)移動(dòng)他，否則我們將看不到任何投影。

<style>
.left {
 box-shadow: -8px 0 5px -5px #333;
}

.right {
 box-shadow: 8px 0 5px -5px #333;
}

.top {
 box-shadow: 0 -8px 5px -5px #333;
}

.bottom {
 box-shadow: 0 8px 5px -5px #333;
}
</style>
<div class='left'>左</div>
<div class='right'>右</div>
<div class='top'>上</div>
<div class='bottom'>下</div>

立體文字陰影

知識(shí)點(diǎn)：

1、立體文字陰影的關(guān)鍵點(diǎn)在于多層 text-shadow 的疊加

2、合理運(yùn)用了 SASS 函數(shù)來(lái)自動(dòng)計(jì)算多層 text-shadow 的 CSS 代碼

3、運(yùn)用了 Sass 的顏色函數(shù)，漸進(jìn)實(shí)現(xiàn)層級(jí)陰影顏色 - fade-out: 改變顏色的透明度，讓顏色更加透明 - desaturate: 改變顏色的飽和度值，讓顏色更少的飽和

4、HSL(顏色值)

H：Hue(色調(diào))。0(或360)表示紅色，120表示綠色，240表示藍(lán)色，也可取其他數(shù)值來(lái)指定顏色。取值為：0 - 360
S：Saturation(飽和度)。取值為：0.0% - 100.0%
L：Lightness(亮度)。取值為：0.0% - 100.0%

<style>
@function blessing($color) {
 $val: 0px 0px $color;
 @for $i from 1 through 50 {
 $color: fade-out(desaturate($color, 1%), .02);
 $val: #{$val}, -#{$i}px #{$i}px #{$color};
 }
 @return $val;
}

div {
 text-align: center;
 font-size: 20vmin;
 line-height: 45vh;
 text-shadow: blessing(hsl(0, 100%, 50%));
 color: hsl(14, 100%, 60%);
}
</style>
<div>福</div>

編譯后的css(推薦scss在線編譯為css工具) https://www.sassmeister.com/

...
div {
 text-align: center;
 font-size: 20vmin;
 line-height: 45vh;
 text-shadow: 0px 0px #992400, 
 1px 1px rgba(152, 36, 1, 0.98), 
 2px 2px rgba(151, 37, 2, 0.96), 
 3px 3px rgba(151, 37, 2, 0.94), 
 ...
 ...
 ... 
 49px 49px rgba(116, 56, 37, 0.02), 
 50px 50px rgba(115, 56, 38, 0);
 color: #ff6333;
}

從淺到深的學(xué)習(xí) CSS3陰影(box-shadow)

線性漸變模擬長(zhǎng)陰影

知識(shí)點(diǎn)

1、借用了元素的兩個(gè)偽元素

2、通過(guò)漸變色填充兩個(gè)偽元素，再通過(guò)位移、變換放置在合適的位置

<style>
div {
 position: relative;
 width: 30vmin;
 height: 30vmin;
 line-height: 30vh;
 text-align: center;
 font-size: 30px;
 background: #fff;
 margin: 30vmin auto;
}

div::before,
div::after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: -1;
}

div::before {
 content: ':before';
 font-size: 30px;
 text-align: center;
 line-height: 30vh;
 transform-origin: 0 50%;
 transform: translate(100%, 0) skewY(45deg) scaleX(.6);
 background: linear-gradient(90deg, rgba(0, 0, 0, .3), transparent);
}

div::after {
 content: ':after';
 font-size: 30px;
 text-align: center;
 line-height: 30vh;
 transform-origin: 0 0;
 transform: translate(0%, 100%) skewX(45deg) scaleY(.6);
 background: linear-gradient(180deg, rgba(0, 0, 0, .3), transparent);
}
</style>
<div>Web秀</div>

從淺到深的學(xué)習(xí) CSS3陰影(box-shadow)

漸變實(shí)現(xiàn)內(nèi)切角

知識(shí)點(diǎn)

1、陰影實(shí)現(xiàn)的關(guān)鍵點(diǎn)在于使用偽元素絕對(duì)定位在容器的一角，元素本身透明，陰影擴(kuò)散開(kāi)形成內(nèi)切圓角效果

2、陰影實(shí)現(xiàn)缺點(diǎn)，單個(gè)標(biāo)簽最多只能是2個(gè)內(nèi)切圓角

3、徑向漸變實(shí)現(xiàn)內(nèi)切圓角可以是4邊

<style>
div {
 position: relative;
 width: 20vw;
 height: 8vw;
 margin: 1vw auto;
 border-radius: 1vmin;
 overflow: hidden;
 line-height: 8vw;
 color: #fff;
 text-align: center;
}

.shadow::before {
 position: absolute;
 content: "";
 top: -2vw;
 left: -2vw;
 width: 4vw;
 height: 4vw;
 border-radius: 50%;
 box-shadow: 0 0 0 15vw #e91e63; 
 z-index: -1;
}

.shadow::after {
 position: absolute;
 content: "";
 bottom: -2vw;
 right: -2vw;
 width: 4vw;
 height: 4vw;
 border-radius: 50%;
 box-shadow: 0 0 0 15vw #e91e63; 
 z-index: -1;
}

.linear {
 background-size: 70% 70%;
 background-image: 
 radial-gradient(
 circle at 100% 100%, 
 transparent 1vw, 
 transparent 2vw, 
 #03A9F5 2vw),
 radial-gradient(
 circle at 0 0, 
 transparent 0, 
 transparent 2vw, 
 #03A9F5 2vw),
 radial-gradient(
 circle at 100% 0, 
 transparent 0, 
 transparent 2vw, 
 #03A9F5 2vw),
 radial-gradient(
 circle at 0 100%, 
 transparent 0, 
 transparent 2vw, 
 #03A9F5 2vw);
 background-repeat: no-repeat;
 background-position: 
 right bottom, 
 left top, 
 right top, 
 left bottom;
}
</style>
<div class="shadow">陰影實(shí)現(xiàn)缺點(diǎn)最多是2邊</div>
<div class="linear">徑向漸變內(nèi)切圓角4邊</div>

從淺到深的學(xué)習(xí) CSS3陰影(box-shadow)

圓環(huán)進(jìn)度條動(dòng)畫(huà)

知識(shí)點(diǎn) ：圓環(huán)進(jìn)度條的移動(dòng)本質(zhì)上是陰影順序延時(shí)移動(dòng)的結(jié)果。

<style>
body {
 background: #000;
}

.container {
 position: relative;
 overflow: hidden;
 width: 124px;
 height: 124px;
 overflow: hidden;
 margin: 100px auto;
 border-radius: 50%;
}

.shadow {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 120px;
 height: 120px;
 line-height: 120px;
 border-radius: 50%;
 color: #fff;
 font-size: 20px;
 cursor: pointer;
 box-shadow: 
 60px -60px 0 2px #e91e63, 
 -60px -60px 0 2px #e91e63, 
 -60px 60px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63;
 text-align: center;
}
.shadow:hover {
 animation: border 0.5s ease forwards;
}

@keyframes border {
 0% {
 box-shadow: 
 60px -60px 0 2px #e91e63, 
 -60px -60px 0 2px #e91e63, 
 -60px 60px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63, 
 0 0 0 2px transparent;
 }
 25% {
 box-shadow: 
 0 -125px 0 2px #e91e63, 
 -60px -60px 0 2px #e91e63, 
 -60px 60px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63, 
 0 0 0 2px #fff;
 }
 50% {
 box-shadow: 
 0 -125px 0 2px #e91e63, 
 -125px 0px 0 2px #e91e63, 
 -60px 60px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63, 
 0 0 0 2px #fff;
 }
 75% {
 box-shadow: 
 0 -125px 0 2px #e91e63, 
 -125px 0px 0 2px #e91e63, 
 0px 125px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63, 
 0 0 0 2px #fff;
 }
 100% {
 box-shadow: 
 0 -125px 0 2px #e91e63, 
 -125px 0px 0 2px #e91e63, 
 0px 125px 0 2px #e91e63, 
 120px 40px 0 2px #e91e63, 
 0 0 0 2px #fff;
 }
}
</style>
<div class="container">
 <div class="shadow">web 秀</div></div>
</div>

從淺到深的學(xué)習(xí) CSS3陰影(box-shadow)

公告

喜歡小編的點(diǎn)擊關(guān)注，了解更多知識(shí)！

源碼地址和源文件下載請(qǐng)點(diǎn)擊下方“了解更多”

眾號(hào)【傳智播客博學(xué)谷】回復(fù)關(guān)鍵詞：前端 PS Java(100G) Python(80G) 大數(shù)據(jù) 區(qū)塊鏈測(cè)試 PPT JS(40g+300教程) HTML 簡(jiǎn)歷領(lǐng)取相關(guān)學(xué)習(xí)資料！

一、HTML

1、<image>標(biāo)簽上title屬性與alt屬性的區(qū)別是什么？

alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說(shuō)明的。且長(zhǎng)度必須少于100個(gè)英文字符或者用戶必須保證替換文字盡可能的短。

這包括那些使用本來(lái)就不支持圖像顯示或者圖像顯示被關(guān)閉的瀏覽器的用戶，視覺(jué)障礙的用戶和使用屏幕閱讀器的用戶等。

title屬性為設(shè)置該屬性的元素提供建議性的信息。使用title屬性提供非本質(zhì)的額外信息。參考《alt和title屬性的區(qū)別及應(yīng)用》

2、分別寫(xiě)出以下幾個(gè)HTML標(biāo)簽：文字加粗、下標(biāo)、居中、字體

加粗：<b>、<strong>

下標(biāo)：<sub>

居中：<center>

字體：<font>、<basefont>、參考《HTML標(biāo)簽列表》

3、請(qǐng)寫(xiě)出至少5個(gè)html5新增的標(biāo)簽，并說(shuō)明其語(yǔ)義和應(yīng)用場(chǎng)景

section：定義文檔中的一個(gè)章節(jié)

nav：定義只包含導(dǎo)航鏈接的章節(jié)

header：定義頁(yè)面或章節(jié)的頭部。它經(jīng)常包含 logo、頁(yè)面標(biāo)題和導(dǎo)航性的目錄。

footer：定義頁(yè)面或章節(jié)的尾部。它經(jīng)常包含版權(quán)信息、法律信息鏈接和反饋建議用的地址。

aside：定義和頁(yè)面內(nèi)容關(guān)聯(lián)度較低的內(nèi)容——如果被刪除，剩下的內(nèi)容仍然很合理。

參考《HTML5 標(biāo)簽列表》

4、請(qǐng)說(shuō)說(shuō)你對(duì)標(biāo)簽語(yǔ)義化的理解？

a. 去掉或者丟失樣式的時(shí)候能夠讓頁(yè)面呈現(xiàn)出清晰的結(jié)構(gòu)

b. 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲(chóng)抓取更多的有效信息：爬蟲(chóng)依賴于標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重；

c. 方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動(dòng)設(shè)備）以意義的方式來(lái)渲染網(wǎng)頁(yè)；

d. 便于團(tuán)隊(duì)開(kāi)發(fā)和維護(hù)，語(yǔ)義化更具可讀性，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)，可以減少差異化。

5、Doctype作用? 嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?

聲明位于文檔中的最前面，處于標(biāo)簽之前。告知瀏覽器以何種模式來(lái)渲染文檔。

嚴(yán)格模式的排版和 JS 運(yùn)作模式是，以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。

在混雜模式中，頁(yè)面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作。

DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以混雜模式呈現(xiàn)。

6、你知道多少種Doctype文檔類型？

標(biāo)簽可聲明三種 DTD 類型，分別表示嚴(yán)格版本、過(guò)渡版本以及基于框架的 HTML 文檔。

HTML 4.01 規(guī)定了三種文檔類型：Strict、Transitional 以及 Frameset。

XHTML 1.0 規(guī)定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。

Standards （標(biāo)準(zhǔn)）模式（也就是嚴(yán)格呈現(xiàn)模式）用于呈現(xiàn)遵循最新標(biāo)準(zhǔn)的網(wǎng)頁(yè)，

Quirks（包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計(jì)的網(wǎng)頁(yè)。

7、HTML與XHTML——二者有什么區(qū)別

a. XHTML 元素必須被正確地嵌套。

b. XHTML 元素必須被關(guān)閉。

c. 標(biāo)簽名必須用小寫(xiě)字母。

d. XHTML 文檔必須擁有根元素。

參考《XHTML 與 HTML 之間的差異》

8、html5有哪些新特性、移除了那些元素？

a. HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能的增加。

b. 拖拽釋放(Drag and drop) API

c. 語(yǔ)義化更好的內(nèi)容標(biāo)簽（header,nav,footer,aside,article,section）

d. 音頻、視頻API(audio,video)

e. 畫(huà)布(Canvas) API

f. 地理(Geolocation) API

g. 本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失

h. sessionStorage 的數(shù)據(jù)在頁(yè)面會(huì)話結(jié)束時(shí)會(huì)被清除

i. 表單控件，calendar、date、time、email、url、search

j. 新的技術(shù)webworker, websocket等

移除的元素：

a. 純表現(xiàn)的元素：basefont，big，center, s，strike，tt，u；

b. 對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；

9、iframe的優(yōu)缺點(diǎn)？

優(yōu)點(diǎn)：

a. 解決加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告等的加載問(wèn)題

b. iframe無(wú)刷新文件上傳

c. iframe跨域通信

缺點(diǎn)：

a. iframe會(huì)阻塞主頁(yè)面的Onload事件

b. 無(wú)法被一些搜索引擎索引到

c. 頁(yè)面會(huì)增加服務(wù)器的http請(qǐng)求

d. 會(huì)產(chǎn)生很多頁(yè)面，不容易管理。

參考《iframe的一些記錄》

10、Quirks模式是什么？它和Standards模式有什么區(qū)別？

在寫(xiě)程序時(shí)我們也會(huì)經(jīng)常遇到這樣的問(wèn)題，如何保證原來(lái)的接口不變，又提供更強(qiáng)大的功能，尤其是新功能不兼容舊功能時(shí)。IE6以前的頁(yè)面大家都不會(huì)去寫(xiě)DTD，所以IE6就假定如果寫(xiě)了DTD，就意味著這個(gè)頁(yè)面將采用對(duì)CSS支持更好的布局，而如果沒(méi)有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。

區(qū)別：總體會(huì)有布局、樣式解析和腳本執(zhí)行三個(gè)方面的區(qū)別。

a. 盒模型：在W3C標(biāo)準(zhǔn)中，如果設(shè)置一個(gè)元素的寬度和高度，指的是元素內(nèi)容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。

b. 設(shè)置行內(nèi)元素的高寬：在Standards模式下，給等行內(nèi)元素設(shè)置wdith和height都不會(huì)生效，而在quirks模式下，則會(huì)生效。

c. 設(shè)置百分比的高度：在standards模式下，一個(gè)元素的高度是由其包含的內(nèi)容來(lái)決定的，如果父元素沒(méi)有設(shè)置百分比的高度，子元素設(shè)置一個(gè)百分比的高度是無(wú)效的用

d. 設(shè)置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會(huì)失效。

11、請(qǐng)闡述table的缺點(diǎn)

a. 太深的嵌套，比如table>tr>td>h3，會(huì)導(dǎo)致搜索引擎讀取困難，而且，最直接的損失就是大大增加了冗余代碼量。

b. 靈活性差，比如要將tr設(shè)置border等屬性，是不行的，得通過(guò)td

c. 代碼臃腫，當(dāng)在table中套用table的時(shí)候，閱讀代碼會(huì)顯得異常混亂

d. 混亂的colspan與rowspan，用來(lái)布局時(shí)，頻繁使用他們會(huì)造成整個(gè)文檔順序混亂。

e. 不夠語(yǔ)義

參考《為什么說(shuō)table表格布局不好？》

12、簡(jiǎn)述一下src與href的區(qū)別

src用于替換當(dāng)前元素；href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系。

src是source的縮寫(xiě)，指向外部資源的位置，指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置

href是Hypertext Reference的縮寫(xiě)，指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接）之間的鏈接

公眾號(hào)【傳智播客博學(xué)谷】回復(fù)關(guān)鍵詞：前端 PS Java Python 大數(shù)據(jù) 區(qū)塊鏈測(cè)試 PPT JS HTML 簡(jiǎn)歷領(lǐng)取相關(guān)學(xué)習(xí)資料！

在線咨詢

上一篇：PHP連接數(shù)據(jù)庫(kù)實(shí)現(xiàn)登錄
下一篇：斗魚(yú)產(chǎn)品分析報(bào)告：游戲直播行業(yè)的未來(lái)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

CSS-‘迷人’的陰影

一、盒子陰影（box-shadow）

二、文本陰影（text-shadow）

前言

單側(cè)投影

立體文字陰影

線性漸變模擬長(zhǎng)陰影

漸變實(shí)現(xiàn)內(nèi)切角

圓環(huán)進(jìn)度條動(dòng)畫(huà)

公告

您的項(xiàng)目需求