html中陰影樣式怎么設(shè)置

這篇文章主要介紹“html中陰影樣式怎么設(shè)置”，在日常操作中，相信很多人在html中陰影樣式怎么設(shè)置問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”html中陰影樣式怎么設(shè)置”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：域名注冊、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、東河網(wǎng)站維護(hù)、網(wǎng)站推廣。

樣式代碼：1、文本陰影樣式“text-shadow: h-shadow v-shadow blur color;”；2、邊框陰影樣式“box-shadow: h-shadow v-shadow blur spread color inset;”；3、圖片陰影樣式“filter:drop-shadow(h-shadow v-shadow blur spread color);”。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

在html中，有三種方法可以給元素添加陰影樣式：

文本陰影：使用text-shadow屬性
邊框陰影：使用box-shadow屬性
圖片陰影：使用filter屬性（需要和drop-shadow()函數(shù)一起使用）

1、文本陰影樣式

在html中，可使用text-shadow屬性來實現(xiàn)帶陰影的文本，text-shadow 屬性應(yīng)用于陰影文本。

語法

text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需。水平陰影的位置。允許負(fù)值。
v-shadow	必需。垂直陰影的位置。允許負(fù)值。
blur	可選。模糊的距離。
color	可選。陰影的顏色。

注意： text-shadow屬性連接一個或更多的陰影文本。屬性是陰影，指定的每2或3個長度值和一個可選的顏色值用逗號分隔開來。已失時效的長度為0。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>設(shè)置文本陰影效果</title> 
        <style> 
            h2 { 
                color: red; 
                text-shadow: 3px 5px 5px #656B79; 
            }
        </style> 
    </head> 
    <body> 
        <h2>文本陰影！</h2>
    </body> 
</html>

效果圖：

html中陰影樣式怎么設(shè)置

2、邊框陰影樣式

在html中，可使用box-shadow屬性來實現(xiàn)帶陰影樣式的邊框。box-shadow屬性可以設(shè)置一個或多個下拉陰影的框。

語法

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

值	說明
h-shadow	必需的。水平陰影的位置。允許負(fù)值
v-shadow	必需的。垂直陰影的位置。允許負(fù)值
blur	可選。模糊距離
spread	可選。陰影的大小
color	可選。陰影的顏色。
inset	可選。從外層的陰影（開始時）改變陰影內(nèi)側(cè)陰影

注意：boxShadow 屬性把一個或多個下拉陰影添加到框上。該屬性是一個用逗號分隔陰影的列表，每個陰影由 2-4 個長度值、一個可選的顏色值和一個可選的 inset 關(guān)鍵字來規(guī)定。省略長度的值是 0。

示例：

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				width: 300px;
				height: 100px;
				background-color:red;
				-moz-box-shadow: 10px 10px 5px #888888;
				/* 老的 Firefox */
				box-shadow: 10px 10px 5px #888888;
			}
		</style>
	</head>
	<body>

		<div>邊框陰影</div>

	</body>
</html>

效果圖：

html中陰影樣式怎么設(shè)置

3、圖片陰影樣式

在html中，可使用filter屬性來實現(xiàn)帶陰影樣式的邊框。

filter 屬性定義了元素(通常是<img>)的可視效果，當(dāng)和drop-shadow()函數(shù)一起使用，可給圖像設(shè)置一個陰影效果。

filter:drop-shadow(h-shadow v-shadow blur spread color);

陰影是合成在圖像下面，可以有模糊度的，可以以特定顏色畫出的遮罩圖的偏移版本。函數(shù)接受<shadow>(在CSS3背景中定義)類型的值，除了"inset"關(guān)鍵字是不允許的。該函數(shù)與已有的box-shadow box-shadow屬性很相似；不同之處在于，通過濾鏡，一些瀏覽器為了更好的性能會提供硬件加速。<shadow>參數(shù)如下：

h-shadow v-shadow (必須)
這是設(shè)置陰影偏移量的兩個 <length>值. <offset-x> 設(shè)定水平方向距離. 負(fù)值會使陰影出現(xiàn)在元素左邊. <offset-y>設(shè)定垂直距離.負(fù)值會使陰影出現(xiàn)在元素上方。查看<length>可能的單位.
如果兩個值都是0, 則陰影出現(xiàn)在元素正后面 (如果設(shè)置了 <blur-radius> and/or <spread-radius>，會有模糊效果).
<blur-radius> (可選)
這是第三個code><length>值. 值越大，越模糊，則陰影會變得更大更淡.不允許負(fù)值若未設(shè)定，默認(rèn)是0 (則陰影的邊界很銳利).
<spread-radius> (可選)
這是第四個 <length>值. 正值會使陰影擴(kuò)張和變大，負(fù)值會是陰影縮小.若未設(shè)定，默認(rèn)是0 (陰影會與元素一樣大小).
注意: Webkit, 以及一些其他瀏覽器不支持第四個長度，如果加了也不會渲染。
<color> (可選)
查看 <color>該值可能的關(guān)鍵字和標(biāo)記。若未設(shè)定，顏色值基于瀏覽器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中，會應(yīng)用colorcolor屬性的值。另外, 如果顏色值省略，WebKit中陰影是透明的。

<!DOCTYPE html>
<html>
<head>
<style>
img {
    -webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
    filter: drop-shadow(8px 8px 10px red);
}
</style>
</head>
<body>

<p>給圖像設(shè)置一個陰影效果:</p>

<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">

</body>
</html>

html中陰影樣式怎么設(shè)置

到此，關(guān)于“html中陰影樣式怎么設(shè)置”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

網(wǎng)站名稱：html中陰影樣式怎么設(shè)置
當(dāng)前網(wǎng)址：http://jinyejixie.com/article36/pshesg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、面包屑導(dǎo)航、營銷型網(wǎng)站建設(shè)、定制開發(fā)、虛擬主機、網(wǎng)站維護(hù)

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

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

html中陰影樣式怎么設(shè)置