整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
靜態頁面中，相信大家見過不少的具有陰影的文字或者容器。本來普普通通的一行文字，平淡出奇的一個div容器，但因為加了一個陰影，一切就顯得不一樣了……
接下來，我們就來介紹一下css中的陰影：
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需的。水平陰影的位置。允許負值
v-shadow 必需的。垂直陰影的位置。允許負值
blur 可選。模糊距離
spread 可選。陰影的大小
color 可選。陰影的顏色。在CSS顏色值尋找顏色值的完整列表
inset 可選。從外層的陰影（開始時）改變陰影內側陰影
一個陰影
注意：同一盒子是可以同時添加多個陰影的，每個陰影之間用" ，"隔開。
兩個陰影，一個向外，一個向內
text-shadow: h-shadow v-shadow blur color;
h-shadow：表示水平偏移量，可為負值。為正，表示向右移，為負，表示向左移。
v-shadow：表示垂直偏移量，可為負值。為正，表示向上移，為負，表示向下移。
blur：陰影模糊程度，不能為負，但可以為0。值越大，陰影模糊程度越大。
color：陰影顏色，可以用rgba（）；
文本陰影
下面，我們借助上面所學，實現一個書本放在書桌上的效果：
書本陰影
利用陰影制做太陽：
您2019豬事順利，心想事成。
前面兩篇文章都有提到過box-shadow，里面也有很多的基礎知識，有看過的小伙伴應該都有或多或少的收獲吧，今天我們再從基礎入手，希望能讓大家更熟悉它。
沒有看過之前文章的小伙伴請點擊：
CSS3 box-shadow實現背景動畫
CSS3動畫解析抖音 LOGO制作
下面我們從最基礎的開始演示。
關鍵點: 1、外 box-shadow 前四個參數：x 偏移值、y 偏移值 、模糊半徑、擴張半徑。 2、單側投影的核心是第四個參數：擴張半徑。這個參數會根據你指定的值去擴大或縮小投影尺寸，如果我們用一個負的擴張半徑，而他的值剛好等于模糊半徑，那么投影的尺寸就會與投影所屬的元素尺寸完全一致，除非使用偏移量來移動他，否則我們將看不到任何投影。
<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>
知識點：
1、立體文字陰影的關鍵點在于多層 text-shadow 的疊加
2、合理運用了 SASS 函數來自動計算多層 text-shadow 的 CSS 代碼
3、運用了 Sass 的顏色函數，漸進實現層級陰影顏色 - fade-out: 改變顏色的透明度，讓顏色更加透明 - desaturate: 改變顏色的飽和度值，讓顏色更少的飽和
4、HSL(顏色值)
<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;
}
從淺到深的學習 CSS3陰影(box-shadow)
從淺到深的學習 CSS3陰影(box-shadow)
知識點
1、借用了元素的兩個偽元素
2、通過漸變色填充兩個偽元素，再通過位移、變換放置在合適的位置
<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>
從淺到深的學習 CSS3陰影(box-shadow)
知識點
1、陰影實現的關鍵點在于使用偽元素絕對定位在容器的一角，元素本身透明，陰影擴散開形成內切圓角效果
2、陰影實現缺點，單個標簽最多只能是2個內切圓角
3、徑向漸變實現內切圓角可以是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">陰影實現缺點最多是2邊</div>
<div class="linear">徑向漸變內切圓角4邊</div>
從淺到深的學習 CSS3陰影(box-shadow)
知識點 ：圓環進度條的移動本質上是陰影順序延時移動的結果。
<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>
從淺到深的學習 CSS3陰影(box-shadow)
喜歡小編的點擊關注，了解更多知識！
源碼地址和源文件下載請點擊下方“了解更多”
眾號【傳智播客博學谷】回復關鍵詞：前端 PS Java(100G) Python(80G) 大數據 區塊鏈 測試 PPT JS(40g+300教程) HTML 簡歷 領取相關學習資料！
一、HTML
1、<image>標簽上title屬性與alt屬性的區別是什么？
alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。且長度必須少于100個英文字符或者用戶必須保證替換文字盡可能的短。
這包括那些使用本來就不支持圖像顯示或者圖像顯示被關閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶等。
title屬性為設置該屬性的元素提供建議性的信息。使用title屬性提供非本質的額外信息。參考《alt和title屬性的區別及應用》
2、分別寫出以下幾個HTML標簽：文字加粗、下標、居中、字體
加粗：<b>、<strong>
下標：<sub>
居中：<center>
字體：<font>、<basefont>、參考《HTML標簽列表》
3、請寫出至少5個html5新增的標簽，并說明其語義和應用場景
section：定義文檔中的一個章節
nav：定義只包含導航鏈接的章節
header：定義頁面或章節的頭部。它經常包含 logo、頁面標題和導航性的目錄。
footer：定義頁面或章節的尾部。它經常包含版權信息、法律信息鏈接和反饋建議用的地址。
aside：定義和頁面內容關聯度較低的內容——如果被刪除，剩下的內容仍然很合理。
參考《HTML5 標簽列表》
4、請說說你對標簽語義化的理解？
a. 去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構
b. 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重；
c. 方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
d. 便于團隊開發和維護，語義化更具可讀性，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。
5、Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?
聲明位于文檔中的最前面，處于 標簽之前。告知瀏覽器以何種模式來渲染文檔。
嚴格模式的排版和 JS 運作模式是，以該瀏覽器支持的最高標準運行。
在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。
6、你知道多少種Doctype文檔類型？
標簽可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基于框架的 HTML 文檔。
HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。
XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
Standards （標準）模式（也就是嚴格呈現模式）用于呈現遵循最新標準的網頁，
Quirks（包容）模式（也就是松散呈現模式或者兼容模式）用于呈現為傳統瀏覽器而設計的網頁。
7、HTML與XHTML——二者有什么區別
a. XHTML 元素必須被正確地嵌套。
b. XHTML 元素必須被關閉。
c. 標簽名必須用小寫字母。
d. XHTML 文檔必須擁有根元素。
參考《XHTML 與 HTML 之間的差異》
8、html5有哪些新特性、移除了那些元素？
a. HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。
b. 拖拽釋放(Drag and drop) API
c. 語義化更好的內容標簽（header,nav,footer,aside,article,section）
d. 音頻、視頻API(audio,video)
e. 畫布(Canvas) API
f. 地理(Geolocation) API
g. 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失
h. sessionStorage 的數據在頁面會話結束時會被清除
i. 表單控件，calendar、date、time、email、url、search
j. 新的技術webworker, websocket等
移除的元素：
a. 純表現的元素：basefont，big，center, s，strike，tt，u；
b. 對可用性產生負面影響的元素：frame，frameset，noframes；
9、iframe的優缺點？
優點：
a. 解決加載緩慢的第三方內容如圖標和廣告等的加載問題
b. iframe無刷新文件上傳
c. iframe跨域通信
缺點：
a. iframe會阻塞主頁面的Onload事件
b. 無法被一些搜索引擎索引到
c. 頁面會增加服務器的http請求
d. 會產生很多頁面，不容易管理。
參考《iframe的一些記錄》
10、Quirks模式是什么？它和Standards模式有什么區別？
在寫程序時我們也會經常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤其是新功能不兼容舊功能時。IE6以前的頁面大家都不會去寫DTD，所以IE6就假定 如果寫了DTD，就意味著這個頁面將采用對CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。
區別：總體會有布局、樣式解析和腳本執行三個方面的區別。
a. 盒模型：在W3C標準中，如果設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。
b. 設置行內元素的高寬：在Standards模式下，給等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。
c. 設置百分比的高度：在standards模式下，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的用
d. 設置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。
11、請闡述table的缺點
a. 太深的嵌套，比如table>tr>td>h3，會導致搜索引擎讀取困難，而且，最直接的損失就是大大增加了冗余代碼量。
b. 靈活性差，比如要將tr設置border等屬性，是不行的，得通過td
c. 代碼臃腫，當在table中套用table的時候，閱讀代碼會顯得異?；靵y
d. 混亂的colspan與rowspan，用來布局時，頻繁使用他們會造成整個文檔順序混亂。
e. 不夠語義
參考《為什么說table表格布局不好？》
12、簡述一下src與href的區別
src用于替換當前元素；href用于在當前文檔和引用資源之間確立聯系。
src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置
href是Hypertext Reference的縮寫，指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接
公眾號【傳智播客博學谷】回復關鍵詞：前端 PS Java Python 大數據 區塊鏈 測試 PPT JS HTML 簡歷 領取相關學習資料！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
