通過代碼示例跟我學(xué)css3相關(guān)技術(shù)及應(yīng)用示例第3部分-資料下載頁
2024-11-08 20:20本頁面
【導(dǎo)讀】示意如何對width和height屬性均不是auto的被替換元素進行縮放。定義盒內(nèi)對象的對齊方式。規(guī)定用戶代理應(yīng)用于圖像的順時針方向旋轉(zhuǎn)。規(guī)定元素應(yīng)該被顯示的頁面特定類型。規(guī)定頁面內(nèi)容包含框的尺寸和方向。允許將元素設(shè)置為標(biāo)準(zhǔn)用戶界面元素的外觀，比如可以模擬Window系統(tǒng)的界面風(fēng)格。允許以確切的方式定義適應(yīng)某個區(qū)域的具體內(nèi)容。為創(chuàng)作者提供使用圖標(biāo)化等價物來設(shè)置元素樣式的能力。規(guī)定在使用arrow-down導(dǎo)航鍵時向何處導(dǎo)航。設(shè)置元素的tab鍵控制次序。對輪廓進行偏移，并在超出邊框邊緣的位置繪制輪廓。normal表示將元素呈現(xiàn)為常規(guī)元素；icon將元素呈現(xiàn)為圖標(biāo)（小圖片）；menu將元素呈現(xiàn)為一套供用戶選擇的選項；field將元素呈現(xiàn)為輸入字段。
【正文】 W3C 的 CSS3 背景與邊框 規(guī)格並沒有規(guī)定必須使用色彩，但省略 boxshadow 屬性的色彩值 (或其對應(yīng)的廠商特定變數(shù) ) 可能無法在每個瀏覽器產(chǎn)生相同的結(jié)果。因此，建議您一律在 boxshadow 屬性中指定色彩值。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 17/20 頁 17 inset 使用這個關(guān)鍵字可以將外部陰影變更為內(nèi)部陰影。下方影像說明與擴散距離圖例 (本節(jié)中的第二個圖例 ) 的 boxshadow 屬性值相同，但結(jié)尾附加 inset 關(guān)鍵字。 （ 3） boxshadow 屬性至多有 6 個參數(shù)設(shè)置 陰影類型：此參數(shù)是一個可選值，如果不設(shè)值，其默認(rèn)的投影方式是外陰影 ；如果取其唯一值“ inset” ,就是將外陰影變成內(nèi)陰影，也就是說設(shè)置陰影類型為“ inset”時，其投影就是內(nèi)陰影； Xoffset：是指陰影水平偏移量其值可以是正負(fù)值可以取正負(fù)值，如果值為正值，則陰影在對象的右邊，反之其值為負(fù)值時，陰影在對象的左邊； Yoffset：是指陰影的垂直偏移量，其值也可以是正負(fù)值，如果為正值，陰影在對象的底部，反之其值為負(fù)值時，陰影在對象的頂部； 陰影模糊半徑：此參數(shù)是可選，但其值只能是為正值，如果其值為 0 時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊； 陰影 擴展半徑：此參數(shù)可選，其值可以是正負(fù)值，如果值為正，則整個陰影都延展擴大，反之值為負(fù)值是，則縮小。 陰影顏色：此參數(shù)可選，如果不設(shè)定任何顏色時，瀏覽器會取默認(rèn)色，但各瀏覽器默認(rèn)色不一樣，特別是在 webkit 內(nèi)核下的 safari 和 chrome 瀏覽器將無色，也就是透明，建議不要省略此參數(shù)。 （ 4）兼容支持各瀏覽器的 boxshadow 的格式 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 18/20 頁 18 // mozboxshadow: 投影方式 X 軸偏移量 Y 軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色 。 //Safari and Google webkitboxshadow: 投影方式 X 軸偏移量 Y 軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色 。 //+ 、 Google chrome + 、 + and IE9 boxshadow: 投影方式 X 軸偏移量 Y 軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色 。 目前高版本的瀏覽器已經(jīng)全面地支持 W3C 的 boxshadow，而且語法也統(tǒng)一。 （ 5）示例 boxShadow{ border: 5px solid 111。 boxshadow: 5px 5px 7px 999。 webkitborderbottomrightradius: 15px。 padding: 15px 25px。 height: inherit。 width: 590px。 } （ 6）單邊陰影效果 .dome2 { boxshadow: 2px 0 0 green, //左邊陰影 0 2px 0 blue, //頂部陰影 0 2px 0 red, //底部陰影 2px 0 0 yellow。 //右邊陰影 } 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 19/20 頁 19 如果只需要在對象某一邊應(yīng)用陰影時，我們可以刪除不使用陰影的設(shè)置。給對象四邊設(shè)計陰影，我們是通過改變 xoffset 和 yoffset 的正負(fù)值來實現(xiàn)，其中 xoffset 為負(fù)值時，生成左邊陰影，為正值時生成右邊陰影， yoffset 為正值是生成底部陰影，為負(fù)值時生成頂部陰影。并且把模糊半徑設(shè)置為 0，如果不設(shè)置為 0 的話那么其他三邊也將會有陰影。 （ 7）多陰影 當(dāng)給同一個元素使用多個陰影屬性時，需要注意它的順序，最先寫的陰影將顯示在最頂層，如我們將上面的實例變一下，給其加上模糊值，將更能看出效果： .demo3 { boxshadow: 2px 0 5px green,0 2px 5px blue,0 2px 5px red,2px 0 5px yellow。 } 左邊的放在了第一，其 green陰影色在頂邊的 blue上，而頂邊的 blue在又在右 邊的 yellow上，右這的 yellow 卻在底邊的 red 上。所以應(yīng)用多次陰影的寫法一定要注意其順序問題。 （ 8）四邊具有相同的陰影效果（只設(shè)置陰影模糊半徑和陰影顏色） .demo7 { boxshadow: 0 0 5px rgb(250,0,0)。 } 我們在這里設(shè)置的是 HEX 值，我們也可以應(yīng)用 css3 的 rgba 值給 boxshadow 的陰影顏色上，這樣的好處是， boxshadow 陰影色多了一個 alpha 透明值 ，如下面的實例： .demo8 { webkitboxshadow: 3px 3px 5px rgba(0,0,0,)。 mozboxshadow: 3px 3px 5px rgba(0,0,0,)。 boxshadow: 0 0 5px rgba(250,0,0,)。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 20/20 頁 20 } 對比上面兩個例子，前一個例子我們沒有應(yīng)用透明值，而后面一個例子我們應(yīng)用了 的透明值，相比之下后面的陰影是不是更淺。當(dāng)然在實踐應(yīng)用中您可以根據(jù)自己的需求進行設(shè)置。 （ 9） 建立光暈效果 只要將 boxshadow 屬性中的前兩個值設(shè)為零，就能在方塊套用光暈效果。 boxshadow: 0 0 5px 5px sienna。
醫(yī)療健康相關(guān)推薦
鄂ICP備17016276號-1