css如何實(shí)現(xiàn)下邊框陰影效果-創(chuàng)新互聯(lián)

這篇文章主要介紹了css如何實(shí)現(xiàn)下邊框陰影效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

我們擁有十多年網(wǎng)頁設(shè)計和網(wǎng)站建設(shè)經(jīng)驗(yàn)，從網(wǎng)站策劃到網(wǎng)站制作，我們的網(wǎng)頁設(shè)計師為您提供的解決方案。為企業(yè)提供成都網(wǎng)站設(shè)計、成都做網(wǎng)站、微信開發(fā)、微信小程序開發(fā)、手機(jī)網(wǎng)站制作、HTML5、等業(yè)務(wù)。無論您有什么樣的網(wǎng)站設(shè)計或者設(shè)計方案要求，我們都將富于創(chuàng)造性的提供專業(yè)設(shè)計服務(wù)并滿足您的需求。

css是什么意思

css是一種用來表現(xiàn)HTML或XML等文件樣式的計算機(jī)語言，主要是用來設(shè)計網(wǎng)頁的樣式，使網(wǎng)頁更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網(wǎng)頁或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級由css根據(jù)這個層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁，也可以配合各種腳本對于網(wǎng)頁進(jìn)行格式化。

在css中，可以使用box-shadow屬性來實(shí)現(xiàn)下邊框陰影效果，語法“box-shadow:0px 15px 10px -15px #000;”。box-shadow屬性可以向框添加一個或多個陰影，用逗號分隔陰影列表。

css box-shadow 屬性

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

語法

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

注釋：box-shadow 向框添加一個或多個陰影。該屬性是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關(guān)鍵詞來規(guī)定。省略長度的值是 0。

css如何實(shí)現(xiàn)下邊框陰影效果

【 】

基本用法

css如何實(shí)現(xiàn)下邊框陰影效果

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

內(nèi)陰影

css如何實(shí)現(xiàn)下邊框陰影效果

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

陰影擴(kuò)展長度值

css如何實(shí)現(xiàn)下邊框陰影效果

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，我們能創(chuàng)造出非常逼真的只有圖片才能實(shí)現(xiàn)的陰影效果。讓我來看一個例子：

css如何實(shí)現(xiàn)下邊框陰影效果

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“css如何實(shí)現(xiàn)下邊框陰影效果”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

名稱欄目：css如何實(shí)現(xiàn)下邊框陰影效果-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://bm7419.com/article28/gdsjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、外貿(mào)建站、移動網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)