Ming Apps

CSS3 tutorial: box shadow

Posted on: 2011/04/07


HTML5 Powered with CSS3 / Styling

如何利用CSS3讓不同的DOM加入影子效果呢?

Step 1: 在head的style中加入以下code:

註: 0px 0px 30px #ccc

第一個數值為影子的x-coordinate,

第二個則是y-coordinate,

第三個是影子長度,

第四個為影子的顏色。


.box_shadow {
-moz-box-shadow: 0px 0px 30px #ccc; /* FF3.5+ */
-webkit-box-shadow: 0px 0px 30px #ccc; /* Saf3.0+, Chrome */
box-shadow: 0px 0px 30px #ccc; /* Opera 10.5, IE9, Chrome 10+ */
}

Step 2: 在body中的DOM加入你的class name

<div class="box_shadow">Ming Apps!</div>

Step 3: 完成!

示範網頁: ming-apps-css3-tutorial-box-shadow-demo.htm

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s

%d 位部落客按了讚: