css怎麼實現下邊框陰影效果

在css中，可以使用box-shadow屬性來實現下邊框陰影效果，語法「box-shadow:0px 15px 10px -15px #000;」。 box-shadow屬性可以在框框中新增一個或多個陰影，用逗號分隔陰影清單。

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

css box-shadow 屬性

box-shadow 屬性為框新增一個或多個陰影。

語法

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

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

【推薦教學：CSS影片教學 】

基本用法

#

box-shadow:2px 2px 5px #000;

box-shadow:0px 0px 10px #000;

內陰影

box-shadow:inset 2px 2px 5px #000;

陰影擴展長度值

box-shadow:0px 0px 5px 10px #000;

#

box-shadow:0px 15px 10px -15px #000;

##

box-shadow:inset 0px 15px 10px -15px #000;

偽元素::before和::after

的樂趣

使用偽元素::before和::after

，我們能創造出非常逼真的只有圖片才能實現的陰影效果。讓我來看一個例子：

<div class="box11 shadow"></div>

.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);
 }

更多程式相關知識，請造訪：程式設計影片

！ ！ ###

以上是css怎麼實現下邊框陰影效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！