CSS3是CSS技術的升級版本,CSS3語言開發是朝向模組化發展的。以前的規範作為一個模組實在是太龐大而且比較複雜,所以,把它分解為一些小的模組,更多新的模組也被加入進來。這些模組包括: 盒子模型、列表模組、超連結方式 、語言模組 、背景和邊框 、文字特效 、多欄佈局等。本章內容我們將為大家講一個簡單的css3陰影效果實例。利用CSS3的陰影屬性可以在網頁的元素上加上陰影效果,這是一個新功能。不過這種特性只在支援CSS3的瀏覽器上有效果,例如:Firefox3.5,Safari 3.1 +,和Google瀏覽器等。
下面就說如何使用css3的陰影屬性。
css3陰影主要用到了box-shadow屬性,該屬性的語法格式如下:
box-shadow:
以上各屬性值的意思如下:
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實作陰影效果實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!