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

您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)畫

CSS3動(dòng)畫解析抖音 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)畫

知識(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)擊下方“了解更多”

ext-shadow是CSS3新增屬性，該屬性可以為頁(yè)面中的文本添加陰影效果。text-shadow屬性的基本語(yǔ)法格式如下：

選擇器{text-shadow:h-shadow v-shadow blur color;}

在上面的語(yǔ)法格式中，h-shadow用于設(shè)置水平陰影的距離，v-shadow用于設(shè)置垂直陰影的p距離，blur用于設(shè)置模糊半徑，color用于設(shè)置陰影顏色。

下面通過(guò)一個(gè)案例來(lái)演示text-shadow屬性的用法，如例所示。

example.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>text-shadow屬性</title>
<style type="text/css">
P{
  font-size: 50px;
  text-shadow:10px 10px 10px red; /*設(shè)置文字陰影的距離、模糊半徑和顏色*/
}
</style>
</head>
<body>
<p>Hello CSS3</p>
</body>
</html>

上述代碼中，第9行代碼用于為文字添加陰影效果，設(shè)置陰影的水平和垂直偏移距離為10px，模糊半徑為10px，陰影顏色為紅色。

運(yùn)行代碼效果如下圖所示：

可以看出，文本右下方出現(xiàn)了模糊的紅色陰影效果。此外，當(dāng)設(shè)置陰影的水平距離參數(shù)或垂直距離參數(shù)為負(fù)值時(shí)，可以改變陰影的投射方向。

注意：

陰影的水平或垂直距離參數(shù)可以設(shè)為負(fù)值，但陰影的模糊半徑參數(shù)只能設(shè)置為正值，并且數(shù)值越大陰影向外模糊的范圍也就越大。

設(shè)置多個(gè)陰影疊加效果

我們可以使用text-shadow屬性給文字添加多個(gè)陰影，從而產(chǎn)生陰影疊加的效果。設(shè)置陰影疊加的方法非常簡(jiǎn)單，我們只需設(shè)置多組陰影參數(shù)，中間用逗號(hào)隔開(kāi)即可，例如，想要對(duì)段落設(shè)置紅色和綠色陰影疊加的效果，可以將p標(biāo)簽的樣式更改為：

P{
  font-size:32px;
  text-shadow:10px 10px 10px red,20px 20px 20px green; /*紅色和綠色的投影疊加*/
}

在上面的代碼中，為文本依次指定了紅色和綠色的陰影效果，并設(shè)置了陰影的位置和模糊數(shù)值。陰影疊加效果如圖所示。

家都知道，現(xiàn)在普遍通用的就是 HTML5 和 CSS3 了，今天就帶大家看看 CSS3 的效果。

CSS3 文本效果

CSS3中包含幾個(gè)新的文本特征。下面蘇蘇老師會(huì)給大家講解以下文本屬性：

text-shadow

box-shadow

text-overflow

word-wrap

word-break

瀏覽器支持

CSS3 的文本陰影

CSS3 中，text-shadow屬性適用于文本陰影。

（效果圖）

我們指定了水平陰影，垂直陰影，模糊的距離，以及陰影的顏色：

實(shí)例教程：

1.給標(biāo)題添加陰影

{

text-shadow: 5px 5px 5px #FF0000;

}

CSS3 box-shadow屬性，CSS3 中 CSS3 box-shadow 屬性適用于盒子陰影

div

{

box-shadow: 10px 10px 5px #888888;

}

2.接下來(lái)給陰影添加顏色

div

{

box-shadow: 10px 10px grey;

}

3.接下來(lái)再給陰影添加一個(gè)模糊效果

div

{

box-shadow: 10px 10px 5px grey;

}

你也可以在 ::before 和 ::after 兩個(gè)偽元素中添加陰影效果

代碼如下

#boxshadow {

position: relative;

b ox-shadow: 1px 2px 4px rgba(0, 0, 0, .5);

pa dding: 10px;

bac kground: white;

}

#boxshadow img {

width: 100%;

border: 1px solid #8a4419;

border-style: inset;

}

#boxshadow::after {

content: '';

position: absolute;

z-index: -1; /* hide shadow behind image */

box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); width: 70%;

left: 15%; /* one half of the remaining 30% */ height: 100px;

bottom: 0;

}

陰影的一個(gè)使用特例是卡片效果

div.card {

width: 250px;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

text-align: center;

}

CSS3 Text Overflow屬性，是CSS3文本溢出屬性指定應(yīng)向用戶如何顯示溢出內(nèi)容。

代碼如下

p.test1 {

white-space: nowrap;

width: 200px;

border: 1px solid #000000;

overflow: hidden;

text-overflow: clip;

}

p.test2 {

white-space: nowrap;

width: 200px;

border: 1px solid #000000;

overflow: hidden;

text-overflow: ellipsis;

}

CSS3的換行

如果某個(gè)單詞太長(zhǎng)，不適合在一個(gè)區(qū)域內(nèi)，它擴(kuò)展到外面：

CSS3中，自動(dòng)換行屬性允許您強(qiáng)制文本換行 - 即使這意味著分裂它中間的一個(gè)字：

CSS代碼如下

p {word-wrap:break-word;}

CSS3 單詞拆分換行屬性指定換行規(guī)則

CSS代碼如下

p.test1 {

word-break: keep-all;

}

p.test2 {

word-break: break-all;

}

新文本屬性

總結(jié)：CSS3真的很好用！很多CSS2實(shí)現(xiàn)不了的都能用CSS3實(shí)現(xiàn)~

有什么問(wèn)題和建議可以私信小編:"666"

在線咨詢

上一篇：前端小哥玩HTML復(fù)選框上癮，能畫logo做視頻，還開(kāi)源成JS庫(kù)
下一篇：軟件測(cè)試/測(cè)試開(kāi)發(fā)-一篇文章帶你入門HTML

您的項(xiàng)目需求

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

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

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

前言

單側(cè)投影

立體文字陰影

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

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

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

公告

您的項(xiàng)目需求