社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
目錄
内阴影示例
3边内影示例
外阴影示例
右下外阴影示例
扩大阴影示例
半透明阴影色示例
上边内阴影示例
右边内阴影示例
下边外阴影示例
右边外阴影示例
下边细线示例
上下边内阴影示例
左右边外阴影示例
多层阴影示例
Shadow 8
首頁 web前端 css教學 CSS3中box-shadow屬性實現的陰影效果總結

CSS3中box-shadow屬性實現的陰影效果總結

不言
不言
Jan 25, 2019 am 11:28 AM
box-shadow

這篇文章帶給大家的內容是關於CSS3中box-shadow屬性實現的陰影效果總結，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

CSS3 box-shadow 屬性用來描述一個元素的一個或多個陰影效果，該屬性幾乎可以讓你完成你想要的任何陰影效果。然而 box-shadow 屬性語法和取值非常靈活，對於新手有點不容易理解。今天總結一下語法和 box-shadow 屬性各種陰影效果。

語法

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;
/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;
/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
/* Global keywords */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;
登入後複製

取值說明：

inset: 預設陰影在邊框外。使用 inset 後，陰影在邊框內（即使是透明邊框），背景之上內容之下。也有些人喜歡把這個數值放在最後，瀏覽器也支援。

: 這是前兩個 值，用來設定陰影偏移量。  設定水平偏移量，如果是負值則陰影位於元素左邊。  設定垂直偏移量，如果是負值則陰影位於元素上面。可用單位請查看 。如果兩者都是0，那麼陰影位於元素後面。這時如果設定了  或  則有模糊效果。

: 這是第三個  值。數值越大，模糊面積越大，陰影就越大越淡。不能為負值。預設為0，此時陰影邊緣銳利。

 : 這是第四個  值。取正值時，陰影擴大；取負值時，陰影收縮。預設為0，此時陰影與元素同樣大。

 : 相關事項查看  。如果沒有指定，則由瀏覽器決定－通常是color的值，不過目前Safari取透明。

網路上找了幾張圖，大家可以對應的看一下，更加好理解。

CSS3中box-shadow屬性實現的陰影效果總結

CSS3中box-shadow屬性實現的陰影效果總結

CSS3中box-shadow屬性實現的陰影效果總結

#再說的具體一點：

div {
    width: 150px;
    height: 150px;
    background-color: #fff;
    
    box-shadow: 120px 80px 40px 20px #0ff;
    /* 顺序为: offset-x, offset-y, blur-size, spread-size, color */
    /* blur-size 和 spread-size 是可选的 (默认为 0) */
}
登入後複製

來個圖解：

CSS3中box-shadow屬性實現的陰影效果總結

最簡單的常規效果

以下是一些最簡單的陰影效果，看程式碼也應該非常容易理解：

HTML

<div class="flex">
  <div class="flex-item">
    <h3 id="内阴影示例">内阴影示例</h3>
    <div class="box boxshadow1"></div>
  </div>
  <div class="flex-item">
    <h3 id="边内影示例">3边内影示例</h3>
    <div class="box boxshadow2"></div>
  </div>
  <div class="flex-item">
    <h3 id="外阴影示例">外阴影示例</h3>
    <div class="box boxshadow3"></div>
  </div>
  <div class="flex-item">
    <h3 id="右下外阴影示例">右下外阴影示例</h3>
    <div class="box boxshadow4"></div>
  </div>
  <div class="flex-item">
    <h3 id="扩大阴影示例">扩大阴影示例</h3>
    <div class="box boxshadow5"></div>
  </div>
  <div class="flex-item">
    <h3 id="半透明阴影色示例">半透明阴影色示例</h3>
    <div class="box boxshadow6"></div>
  </div>
</div>
登入後複製

CSS

.flex{display:flex;flex-wrap:wrap;} 
.flex-item{margin-right:30px;}

.box {  background-color: #CCCCCC; border-radius:10px; width: 200px; height: 200px;  }
.boxshadow1{ box-shadow:inset 0px 0px 5px 1px #000; }
.boxshadow2{ box-shadow:inset 0 1px 2px 1px #000; }
.boxshadow3{box-shadow:0 0 10px #000;}
.boxshadow4{box-shadow:2px 2px 5px #000;}
.boxshadow5{box-shadow:0 0 5px 15px #000;}
.boxshadow6{box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);}
登入後複製

#效果如下

CSS3中box-shadow屬性實現的陰影效果總結

單邊陰影效果

單邊陰影效果可以做一些效果，例如特殊場景下描邊，小陰影，再例如一些過渡色。

HTML

<div class="flex">
  <div class="flex-item">
    <h3 id="上边内阴影示例">上边内阴影示例</h3>
    <div class="box boxshadow1"></div>
  </div>
  <div class="flex-item">
    <h3 id="右边内阴影示例">右边内阴影示例</h3>
    <div class="box boxshadow2"></div>
  </div>
  <div class="flex-item">
    <h3 id="下边外阴影示例">下边外阴影示例</h3>
    <div class="box boxshadow3"></div>
  </div>
  <div class="flex-item">
    <h3 id="右边外阴影示例">右边外阴影示例</h3>
    <div class="box boxshadow4"></div>
  </div>
  <div class="flex-item">
    <h3 id="下边细线示例">下边细线示例</h3>
    <div class="box boxshadow5"></div>
  </div>
</div>
登入後複製

CSS

.flex{display:flex;flex-wrap:wrap;} 
.flex-item{margin-right:30px;}

.box {  background-color: #CCCCCC;  width: 200px; height: 200px;  }
.boxshadow1{ box-shadow:inset 0px 15px 10px -15px #000; }
.boxshadow2{ box-shadow:inset -15px 0px  10px -15px #000;}
.boxshadow3{box-shadow:0px 12px 8px -12px #000; border-radius:10px; }
.boxshadow4{box-shadow:3px 0 8px -4px #000;}
.boxshadow5{ box-shadow: inset 0px -1px 0px 0px rgb(0, 0, 0) ;}
登入後複製

效果如下

CSS3中box-shadow屬性實現的陰影效果總結

雙邊邊陰影及多重陰影效果

HTML

<div class="flex">
  <div class="flex-item">
    <h3 id="上下边内阴影示例">上下边内阴影示例</h3>
    <div class="box boxshadow1"></div>
  </div>
  
  <div class="flex-item">
    <h3 id="左右边外阴影示例">左右边外阴影示例</h3>
    <div class="box boxshadow2"></div>
  </div>
  <div class="flex-item">
    <h3 id="多层阴影示例">多层阴影示例</h3>
    <div class="box boxshadow3"></div>
  </div>
</div>
登入後複製

CSS

#
.flex{display:flex;flex-wrap:wrap;} 
.flex-item{margin-right:30px;}

.box {  background-color: #CCCCCC;  width: 200px; height: 200px;  }

.boxshadow1{ 
  box-shadow:inset 0px 15px 15px -15px #000,
             inset 0px -15px 15px -15px #000; 
}
.boxshadow2{ 
  box-shadow:15px 0 15px -15px #000,
             -15px 0 15px -15px #000;
}
.boxshadow3{ border-radius:10px; 
  box-shadow:0px 0px 0px 3px #bb0a0a,
             0px 0px 0px 6px #2e56bf,
             0px 0px 0px 9px #ea982e;
}
登入後複製

效果如下

CSS3中box-shadow屬性實現的陰影效果總結


CSS3中box-shadow屬性實現的陰影效果總結


##其他一些有趣的陰影：

使用偽元素::before和::after，我們能創造出非常逼真的只有圖片才能實現的陰影效果。讓我來看一個範例：CSS3中box-shadow屬性實現的陰影效果總結

HTML######
<div class="box11 shadow"></div>
登入後複製
###CSS###
.box11 {
	width: 300px;
	height: 100px;
	background: #ccc;
	border-radius: 10px;
	margin: 10px;
}

.shadow {
	position: relative;
	max-width: 270px;
	box-shadow: 0px 1px 4px rgba(0,0,0,0.3),
				0px 0px 20px rgba(0,0,0,0.1) inset;
}

.shadow::before,
.shadow::after {
   content:"";
   position:absolute;
   z-index:-1;
}

.shadow::before,
.shadow::after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
}

.shadow::before,
.shadow::after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   transform:rotate(-3deg);
}

.shadow::after{
   right:10px;
   left:auto;
   transform:rotate(3deg);
 }
登入後複製
###效果如下##############再來一些效果：######HTML###
<div class="wrap">
  <div class="box box1 shadow1">
    <h3 id="Shadow-nbsp">Shadow 1</h3>
  </div>
  <div class="box box2 shadow2">
    <h3 id="Shadow-nbsp">Shadow 2</h3>
  </div>
  <div class="box box3 shadow3">
    <h3 id="Shadow-nbsp">Shadow 3</h3>
  </div>
  <div class="box box4 shadow4">
    <h3 id="Shadow-nbsp">Shadow 4</h3>
  </div>
  <div class="box box5 shadow5">
    <h3 id="Shadow-nbsp">Shadow 5</h3>
  </div>
  <div class="box box6 shadow6">
    <h3 id="Shadow-nbsp">Shadow 6</h3>
  </div>
  <div class="box box7 shadow7">
    <h3 id="Shadow-nbsp">Shadow 7</h3>
  </div>
  <div class="box box8 shadow8">
    <h3 id="Shadow-nbsp">Shadow 8</h3>
  </div>
</div>
登入後複製
###CSS######
body{
  background:#E6EEF6;
}
.wrap{
  margin-left:20px;
}
.box{
  width:40%;
  height:200px;
  float:left;
  background-color:white; 
  margin:25px 15px;
  border-radius:5px;
}
.box h3{
  font-family: &#39;Didact Gothic&#39;, sans-serif;
  font-weight:normal;
  text-align:center;
  padding-top:60px;
  color:#fff;
}
.box1{
  background-color: #EBA39E;
}
.box2{
  background-color: #EDE89A;
}
.box3{
  background-color: #9EEBA1;
}
.box4{
  background-color: #9EEBBF;
}
.box5{
  background-color: #9ED9EB;
}
.box6{
  background-color: #9EB3EB;
}
.box7{
  background-color: #DB9EEB;
}
.box8{
  background-color: #C49EEB;
}
.shadow1, .shadow2, .shadow3,.shadow4,.shadow5,.shadow6,.shadow7,.shadow8{
  position:relative;
}
.shadow1,.shadow2,.shadow3,.shadow4,.shadow5,.shadow6,.shadow7,.shadow8{
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;
}
/*****************************************************************dashed border
****************************************************************/
.shadow1 h3, .shadow2 h3, .shadow3 h3, .shadow4 h3, .shadow5 h3, .shadow6 h3, .shadow7 h3, .shadow8 h3{
  width:87%;
  height:100px;
  margin-left:6%;
  border:2px dashed #F7EEEE;
  border-radius:5px;
}
/****************************************************************
*styling shadows
****************************************************************/
.shadow1:before, .shadow1:after{
  position:absolute;
  content:"";
  bottom:12px;left:15px;top:80%;
  width:45%;
  background:#9B7468;
  z-index:-1;
  -webkit-box-shadow: 0 20px 15px #9B7468;
  -moz-box-shadow: 0 20px 15px #9B7468;
  box-shadow: 0 20px 15px #9B7468;
  -webkit-transform: rotate(-6deg);
  -moz-transform: rotate(-6deg);
  transform: rotate(-6deg);
}
.shadow1:after{
  -webkit-transform: rotate(6deg);
  -moz-transform: rotate(6deg);
  transform: rotate(6deg);
  right: 15px;left: auto;
}
.shadow2:before{
  position:absolute;
  content:"";
  width:80%;
  top:140px;bottom:15px;left:30px;
  background-color:#9F8641;
  z-index:-1;
  -webkit-box-shadow:0 23px 17px 0 #9F8641;
  -moz-box-shadow:0 23px 17px 0 #9F8641;
  box-shadow: 0 23px 17px 0 #9F8641;
  -webkit-transform:rotate(-4deg);
  -moz-transform:rotate(-4deg);
  transform:rotate(-4deg);
}
.shadow3:before, .shadow3:after{
  content:"";
  position:absolute;
  bottom:0;top:2px;left:15px;right:15px;
  z-index:-1;
  border-radius:100px/30px;
 -webkit-box-shadow:0 0 30px 2px #479F41;
  -moz-box-shadow:0 0 30px 2px #479F41;
  box-shadow: 0 0 30px 2px #479F41;
}
.shadow4:before, .shadow4:after{
  position:absolute;
  content:"";
  top:14px;bottom:14px;left:0;right:0;
  box-shadow:0 0 25px 3px #548E7F;
  border-radius:100px/10px;
  z-index:-1;
}
.shadow5:before, .shadow5:after{
  position:absolute;
  content:"";
  box-shadow:0 10px 25px 20px #518C96;
  top:40px;left:10px;bottom:50px;
  width:15%;
  z-index:-1;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.shadow5:after{
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;left: auto;
}
.shadow6:before, .shadow6:after{
  position:absolute;
  content:"";
  top:100px;bottom:5px;left:30px;right:30px;
  z-index:-1;
  box-shadow:0 0 40px 13px #486685;
  border-radius:100px/20px; 
}
.shadow7:before, .shadow7:after{
  position:absolute;
  content:"1";
  top:25px;left:20px;bottom:150px;
  width:80%;
  z-index:-1;
  -webkit-transform: rotate(-6deg);
  -moz-transform: rotate(-6deg);
  transform: rotate(-6deg);
}
.shadow7:before{
  box-shadow:10px -10px 30px 15px #984D8E;
}
.shadow7:after{
  -webkit-transform: rotate(7deg);
  -moz-transform: rotate(7deg);
  transform: rotate(7deg);
  bottom: 25px;top: auto;
  box-shadow:10px 10px 30px 15px #984D8E;
}
.shadow8{
  box-shadow:
 -6px -6px 8px -4px rgba(250,254,118,0.75),
  6px -6px 8px -4px rgba(254,159,50,0.75),
  6px 6px 8px -4px rgba(255,255,0,0.75),
  6px 6px 8px -4px rgba(0,0,255,2.75);
}
登入後複製
###效果如下###############

以上是CSS3中box-shadow屬性實現的陰影效果總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前 By DDD
如何修復KB5055523無法在Windows 11中安裝？
2 週前 By DDD
Inzoi：如何申請學校和大學
4 週前 By DDD
如何修復KB5055518無法在Windows 10中安裝？
2 週前 By DDD
Roblox：Dead Rails - 如何召喚和擊敗Nikola Tesla
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
顯示更多

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7849
15
Java教學
1649
14
CakePHP 教程
1403
52
Laravel 教程
1300
25
PHP教程
1241
29
顯示更多
Related knowledge
VUE 3 VUE 3 Apr 02, 2025 pm 06:32 PM

它的出局！恭喜Vue團隊完成了完成，我知道這是一項巨大的努力，而且很長時間。所有新文檔也是如此。

您可以從瀏覽器獲得有效的CSS屬性值嗎？ 您可以從瀏覽器獲得有效的CSS屬性值嗎？ Apr 02, 2025 pm 06:17 PM

我有人寫了這個非常合法的問題。 Lea只是在博客上介紹瞭如何從瀏覽器中獲得有效的CSS屬性。那樣的是這樣。

在CI/CD上有點 在CI/CD上有點 Apr 02, 2025 pm 06:21 PM

我說的“網站”比“移動應用程序”更合適，但我喜歡Max Lynch的框架：

帶有粘性定位的堆疊卡和一點點的雜物 帶有粘性定位的堆疊卡和一點點的雜物 Apr 03, 2025 am 10:30 AM

前幾天，我發現了科里·金尼文（Corey Ginnivan）網站上的這一點，當您滾動時，彼此之間的卡片堆放集。

在WordPress塊編輯器中使用Markdown和本地化 在WordPress塊編輯器中使用Markdown和本地化 Apr 02, 2025 am 04:27 AM

如果我們需要直接在WordPress編輯器中向用戶顯示文檔，那麼最佳方法是什麼？

比較瀏覽器的響應式設計 比較瀏覽器的響應式設計 Apr 02, 2025 pm 06:25 PM

這些桌面應用程序中有許多目標是同時在不同的維度上顯示您的網站。因此，例如，您可以寫作

為什麼Flex佈局中的紫色斜線區域會被誤認為是'溢出空間”？ 為什麼Flex佈局中的紫色斜線區域會被誤認為是'溢出空間”？ Apr 05, 2025 pm 05:51 PM

關於Flex佈局中紫色斜線區域的疑問在使用Flex佈局時，你可能會遇到一些令人困惑的現象，比如在開發者工具（d...

如何將CSS網格用於粘頭和頁腳 如何將CSS網格用於粘頭和頁腳 Apr 02, 2025 pm 06:29 PM

CSS網格是一系列屬性的集合，旨在使佈局比以往任何時候都容易。像任何東西一樣，那裡有一點學習曲線，但是網格是

See all articles