在css3中box-shadow什麼意思-前端問答-PHP中文網

首頁

web前端

前端問答

在css3中box-shadow什麼意思

青灯夜游

Feb 28, 2022 pm 04:50 PM

box-shadowcss3

在css3中，“box-shadow”的意思為“盒子陰影”，是一個為元素添加邊框陰影的新增屬性；該屬性可以向框添加一個或多個陰影，語法“box -shadow: 水平陰影垂直陰影模糊距離尺寸顏色inset;」。

在css3中box-shadow什麼意思

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

在css3中box-shadow什麼意思

在css3中，「box-shadow」的意思為“盒子陰影”，是一個為元素添加邊框陰影的新增屬性。

在css3中box-shadow什麼意思

box-shadow屬性為框添加一個或多個陰影。

註解：使用 border-image-* 屬性來建構漂亮的可伸縮按鈕！

語法：

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

box-shadow 在方塊上新增一個或多個陰影。此屬性是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關鍵字來規定。省略長度的值是 0。

h-shadow 必要。水平陰影的位置。允許負值。
v-shadow 必要。垂直陰影的位置。允許負值。
blur 可選。模糊距離。
spread 可選。陰影的尺寸。
color 可選。陰影的顏色。請參閱 CSS 顏色值。
inset 可選。將外部陰影 (outset)改為內部陰影。

以下是我給大家做的幾個小測試：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
div
{
	width:300px;
	height:100px;
	background-color:yellow;
	box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

運行結果：
在css3中box-shadow什麼意思

其中我們也演練如何創建"polaroid"的照片和旋轉圖片。例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
body
{
	margin:30px;
	background-color:#E9E9E9;
}

div.polaroid
{
	width:294px;
	padding:10px 10px 20px 10px;
	border:1px solid #BFBFBF;
	background-color:white;
	/* Add box-shadow */
	box-shadow:2px 2px 3px #aaaaaa;
}

div.rotate_left
{
	float:left;
	-ms-transform:rotate(7deg); /* IE 9 */
	-webkit-transform:rotate(7deg); /* Safari and Chrome */
	transform:rotate(7deg);
}

div.rotate_right
{
	float:left;
	-ms-transform:rotate(-8deg); /* IE 9 */
	-webkit-transform:rotate(-8deg); /* Safari and Chrome */
	transform:rotate(-8deg);
}
</style>
</head>
<body>

<div class="polaroid rotate_left">
<img src="/static/imghwm/default1.png"  data-src="pulpitrock.jpg"  class="lazy"   alt=""    style="max-width:90%"  style="max-width:90%">
<p class="caption">The pulpit rock in Lysefjorden, Norway.</p>
</div>

<div class="polaroid rotate_right">
<img src="/static/imghwm/default1.png"  data-src="cinqueterre.jpg"  class="lazy"   alt=""    style="max-width:90%"  style="max-width:90%">
<p class="caption">Monterosso al Mare. One of the five villages in Cinque Terre.</p>
</div>


</body>
</html>

運行結果如下：

在css3中box-shadow什麼意思

·box-shadow陰影有許多種，例如：內陰影、外陰影、三邊陰影、雙邊陰影、單邊陰影、西線描邊·······、

代表的意思就是：

在css3中box-shadow什麼意思例如：

<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什麼意思

（學習影片分享：css影片教學、web前端入門教程）

以上是在css3中box-shadow什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

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

反應的局限性是什麼？May 02, 2025 am 12:26 AM

Include：1）AsteeplearningCurvedUetoItsVasteCosystem，2）SeochallengesWithClient-SiderEndering，3）潛在的PersperformanceissuesInsuesInlArgeApplications，4）ComplexStateStateManagementAsappsgrow和5）TheneedtokeEedtokeEedtokeEppwithitsrapideDrapidevoltolution.thereedtokeEppectortorservolution.thereedthersrapidevolution.ththesefactorsshesssheou

React的學習曲線：新開發人員的挑戰May 02, 2025 am 12:24 AM

reactischallengingforbeginnersduetoitssteplearningcurveandparadigmshifttocoment oparchitecent.1）startwithofficialdocumentationforasolidFoundation.2）了解jsxandhowtoembedjavascriptwithinit.3）

為React中的動態列表生成穩定且獨特的鍵May 02, 2025 am 12:22 AM

ThecorechallengeingeneratingstableanduniquekeysfordynamiclistsinReactisensuringconsistentidentifiersacrossre-rendersforefficientDOMupdates.1)Usenaturalkeyswhenpossible,astheyarereliableifuniqueandstable.2)Generatesynthetickeysbasedonmultipleattribute

JavaScript疲勞：與React及其工具保持最新May 02, 2025 am 12:19 AM

javascriptfatigueinrectismanagbaiblewithstrategiesLike just just in-timelearninganning and CuratedInformationsources.1）學習whatyouneedwhenyouneedit

使用USESTATE（）掛鉤的測試組件May 02, 2025 am 12:13 AM

tateractComponents通過theusestatehook，使用jestandReaCtTestingLibraryToSigulationsimintionsandIntractions and verifyStateChangesInTheUI.1）underthecomponentAndComponentAndComponentAndConconentAndCheckInitialState.2）模擬useruseruserusertactionslikeclicksorformsorformsormissions.3）

React中的鑰匙：深入研究性能優化技術May 01, 2025 am 12:25 AM

KeysinreactarecrucialforopTimizingPerformanceByingIneFefitedListupDates.1）useKeyStoIndentifyAndTrackListelements.2）避免使用ArrayIndicesasKeystopreventperformansissues.3）ChooSestableIdentifierslikeIdentifierSlikeItem.idtomaintainAinainCommaintOnconMaintOmentStateAteanDimpperperFermerfermperfermerformperfermerformfermerformfermerformfermerment.ChosestopReventPerformissues.3）

反應中的鍵是什麼？May 01, 2025 am 12:25 AM

ReactKeySareUniqueIdentifiers usedwhenrenderingListstoimprovereConciliation效率。 1）heelPreactrackChangesInListItems，2）使用StableanDuniqueIdentifiersLikeItifiersLikeItemidSisRecumended，3）避免使用ArrayIndicesaskeyindicesaskeystopreventopReventOpReventSissUseSuseSuseWithReRefers和4）

反應中獨特鍵的重要性：避免常見的陷阱May 01, 2025 am 12:19 AM

獨特的keysarecrucialinreactforoptimizingRendering和MaintainingComponentStateTegrity.1）useanaturalAlaluniqueIdentifierFromyourDataiFabable.2）ifnonaturalalientedifierexistsistsists，generateauniqueKeyniqueKeyKeyLiquekeyperaliqeyAliqueLiqueAlighatiSaliqueLiberaryLlikikeuuId.3）deversearrayIndiceSaskeyseSecialIndiceSeasseAsialIndiceAseAsialIndiceAsiall

See all articles