學習筆記2015 09 07

2021-07-05 04:07:57 字數 1661 閱讀 2325

原文作者

zhcexo

很多人寫文章介紹什麼東西的時候,都會使用「詳述」兩個字吧,但我這裡寫的是簡介。當然這個簡介也不會非常簡單,只比「詳述」簡潔一些,因為可能在平時使用的時候,我們用不著關於box-shadow的方方面面,所以我只把我覺得有用的部分介紹一下。

語法:

box-shadow:

||

取值: 

?? ||: 陰影水平偏移值(可取正負值);陰影垂直偏移值(可取正負值);陰影模糊值;陰影顏色 

現在我將它正確地想表達的意思再表達一下:

box-shadow:x 軸偏移 y 軸偏移 [模糊半徑] [陰影顏色] [inset]

· 其中 x 軸偏移和 y 軸偏移是必須的兩個值(接受正值或負值)

· 模糊半徑為可選(如果沒有這個值,預設為0,不支援負值)

· 陰影顏色為可選(如果沒有這個值,基於 gecko 的瀏覽器會使用color屬性的值,而基於 webkit 的瀏覽器會預設為transparent

·inset選項為可選(如果沒有這個值,陰影就為外陰影,顯示在 box 外部,空間上在 box 後面;如果帶有這個值,陰影即為內陰影,空間上顯示在 box 前面)

·box-shadow目前要使用的話,基於 gecko 的瀏覽器寫成-moz-box-shadow,基於 webkit 的瀏覽器寫成-webkit-box-shadow,opera 寫成-o-box-shadow,什麼都不寫,ie9可以識別。

另外需要說明的一點是,box-shadow後面的引數新增陰影效果,你可以新增不只一組引數,每組引數之間使用逗號(,)來分隔,在同乙個元素上使用多個陰影,比如像這樣:

box-shadow: 0 1px 2px rbga(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.5) inset, ……

box-shadow

**是box-shadow:5px 5px 0 red, 10px 10px 0 blue,可以看到,雖然藍色的陰影是後來新增的,但空間上它卻位於紅色的陰影之下。再需要強調的一點是,box-shadow指定的陰影的形狀會隨著border-radius指定的圓角而變化。也就是說,如果你沒有為 box 指定圓角,那麼陰影也是方形的;如果你為 box 指定了圓角,那麼陰影也是圓角的陰影。乙個極端的例子如下:

box-shadow

至於 ie6/7/8 可以使用filter來實現,sofish 的這篇文章裡寫得很清楚了,可是我不怎麼贊同這種寫法。我認為box-shadow就是一種錦上添花的效果,如果瀏覽器方便支援,就加上,如果瀏覽器不支援,那也真沒必要這麼做。不知道這算不算是一種 progressive enhancement……

Oracle學習筆記20150907索引

索引的分類 單列索引create index 索引名 on 表名 列名 復合索引create index 索引名 on 表名 列名1,列名2 例如 create table users name varchar2 32 age number,email varchar2 32 create inde...

學習筆記 雜湊學習筆記

hash基本原理 hash就是乙個像函式一樣的東西,你放進去乙個值,它給你輸出來乙個值。輸出的值就是hash值。一般hash值會比原來的值更好儲存 更小 或比較。那字串hash就非常好理解了。就是把字串轉換成乙個整數的函式。而且要盡量做到使字串對應唯一的hash值。它的主要思路是選取恰當的進製,可以...

學習筆記 CentOS 學習筆記01

簡單的做個課堂筆記 虛擬機器用的是vmware,系統是centos cd etc sysconfig network scripts pwdls 顯示列表 cat ifcfg eth0 檢視檔案內容 vi ifcfg eth0 進入vi編輯器 onboot no 原始設定 x逐字刪除 d刪除整行 a...