html中陰影樣式怎么設置

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

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

樣式代碼：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);”。

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

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

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

1、文本陰影樣式

在html中，可使用text-shadow屬性來實現帶陰影的文本，text-shadow 屬性應用于陰影文本。

語法

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

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

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

示例：

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

效果圖：

html中陰影樣式怎么設置

2、邊框陰影樣式

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

語法

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

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

注意：boxShadow 屬性把一個或多個下拉陰影添加到框上。該屬性是一個用逗號分隔陰影的列表，每個陰影由 2-4 個長度值、一個可選的顏色值和一個可選的 inset 關鍵字來規定。省略長度的值是 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中陰影樣式怎么設置

3、圖片陰影樣式

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

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

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

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

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

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

</body>
</html>

html中陰影樣式怎么設置

到此，關于“html中陰影樣式怎么設置”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注創新互聯網站，小編會繼續努力為大家帶來更多實用的文章！

網站名稱：html中陰影樣式怎么設置
當前網址：http://www.2m8n56k.cn/article36/pshesg.html

成都網站建設公司_創新互聯，為您提供網站內鏈、面包屑導航、營銷型網站建設、定制開發、虛擬主機、網站維護

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

中文字幕第五页-中文字幕第页-中文字幕韩国-中文字幕最新-国产尤物二区三区在线观看-国产尤物福利视频一区二区

html中陰影樣式怎么設置