首頁 > 文章 > web前端 > css3實作陰影效果實例

css3實作陰影效果實例

小云云原創: 2017-11-20 17:14:092303瀏覽

CSS3是CSS技術的升級版本，CSS3語言開發是朝向模組化發展的。以前的規範作為一個模組實在是太龐大而且比較複雜，所以，把它分解為一些小的模組，更多新的模組也被加入進來。這些模組包括: 盒子模型、列表模組、超連結方式、語言模組、背景和邊框、文字特效、多欄佈局等。本章內容我們將為大家講一個簡單的css3陰影效果實例。利用CSS3的陰影屬性可以在網頁的元素上加上陰影效果，這是一個新功能。不過這種特性只在支援CSS3的瀏覽器上有效果，例如：Firefox3.5，Safari 3.1 +，和Google瀏覽器等。

下面就說如何使用css3的陰影屬性。

css3陰影主要用到了box-shadow屬性，該屬性的語法格式如下：

box-shadow: aebbc57205355fec8fe9adf498794a28 f73f7ffdfbb7c8af7c07304c34ca871c 8dbd294e4d69b8278cba78d29f0f8eb0 b10fb37415d019cfffa8c4d7366c607f

以上各屬性值的意思如下：

horizontal（水平）：指定水平偏移陰影。正值（即：5px）陰影向右，而為負值（即：- 10px）將使它偏向左。
vertical（垂直）：指定垂直偏移陰影。正值（即：5px）會使陰影在框的底部，而負值（即：- 10px）將使它偏向上。
blur(模糊)：設定的柔化半徑。預設值為0，這意味著沒有模糊。正值增加了模糊，而負值，實際上縮小了陰影。此屬性預設為0。
clolor(顏色)：顏色值,也就是設定陰影顏色。

提醒：該屬性可以加在任意元素上，如圖片，Div，SPAN，P標籤等等都可以。

下面看一個具體的陰影範例，如下是效果範例圖和具體的程式碼：

<html xmlns="http://www.phpernote.com/">
<head>
<title>CSS3阴影效果实例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#shadow {
box-shadow: 10px 10px 5px #888888;
width:500px;
padding:5px;
text-align:center;
font-size:20px;
background:#21759b;
margin:0 auto;
color:#ffffff;
}
</style>
</head>
<body>
<div id="shadow">矩形的 CSS3 的阴影</div>
</body>
</html>

以上這個關於css3的簡單的小教程，希望能幫助到大家。

css3實作陰影效果實例

相關文章