中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

10. 盒陰影

box-shadow 屬性可以對HTML元素添加陰影 而不用額外的標簽或背景圖片。類似text-shadow 屬性，它增強設計的細節(jié)；而且因為它不影響內(nèi)容的可讀性，隨意他可以是增加那種額外感覺/效果的一種很好的方法。

10to1 為它的導航北京和hover狀態(tài)使用了box-shadow 屬性.

10to1 為其導航區(qū)域增加的一個簡單的陰影并將該屬性應用于導航鏈接的hover效果:

#navigation {
 -webkit-box-shadow: 0 0 10px #000;
 -moz-box-shadow: 0 0 10px #000;
 }
 #navigation li a:hover,
 #navigation li a:focus {
 -webkit-box-shadow: 0 0 5px #111;
 -moz-box-shadow: 0 0 5px #111;
 }

box-shadow屬性可以用多個值：水平偏移、垂直偏移、模糊半徑、伸展半徑和陰影顏色。水平和垂直偏移和陰影色使用的最多。

在一個div上應用紅色陰影，右邊和下邊偏移4px，無模糊，我們可以使用下面的代碼：

div {
    -moz-box-shadow: 4px 4px 0 #f00;
    -webkit-box-shadow: 4px 4px 0 #f00;
    box-shadow: 4px 4px 0 #f00;
    }

瀏覽器支持: box-shadow目前只有Webkit核心瀏覽器支持，但是即將發(fā)布的Firefox 3.5 也將提供很好的支持。

擴展閱讀：

• CSS3系列教程:陰影
• The ‘box-shadow’ property — W3C Working Draft
• Box-shadow, one of CSS3’s best new features — CSS3.info
• Apple’s Navigation bar using only CSS
• Box Shadow — Surfin’ Safari blog

11. 盒子大小

根據(jù)CSS 2.1 規(guī)范，在計算盒子的總大小的時候，元素的邊框和padding應該被加入到寬度和高度之中的。但是眾所周知，舊的瀏覽器卻以它們自己的非常有“創(chuàng)意”的方式來解釋這個規(guī)范。box-sizing屬性允許你指定瀏覽器如何計算一個元素的寬度和高度。

WordPress 在控制面板的所有的輸入框元素中使用border-box 屬性。

WordPress 后臺區(qū)域在它的所有text類型的input標簽和textarea標簽上使用了該屬性:

input[type="text"],
 textarea {
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;
 }

第三個屬性(-ms-box-sizing) 只有在Internet Explorer 8下有效。通過其他選擇器，WordPress 的樣式表同樣添加了Konqueror 屬性： -khtml-box-sizing。

box-sizing 屬性可以兩個值中的一個：border-box 和content-box。 Content-box如CSS2.1中的定義的那樣渲染寬度。Border-box 從設定的寬度和高度中扣除padding和邊框(如老式瀏覽器那樣。)。

瀏覽器支持： box-sizing 被IE8、Opera、Gecko核心和Webkit核心瀏覽器支持。

擴展閱讀：

• ‘box-sizing’ property: W3C Candidate Recommendation
• Box-sizing, box-model fixes for the simple people: CSS3.info
• CSS3 box-sizing attribute

出處：藍色理想
責任編輯：bluehearts

上一頁 用CSS3將你的設計帶入下個高度 [10] 下一頁 用CSS3將你的設計帶入下個高度 [12]

◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。