首頁 > web前端 > css教學 > css3實作陰影效果實例

css3實作陰影效果實例

小云云
發布: 2017-11-20 17:14:09
原創
2372 人瀏覽過

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

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

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

box-shadow:

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

horizo​​ntal(水平):指定水平偏移陰影。正值(即: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 畫各種基本圖形小技巧

CSS3自訂捲軸樣式的範例詳解

css3動畫中圓形運動軌跡的實作

#

以上是css3實作陰影效果實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板