譯轉 仔細檢視CSS盒陰影

2021-06-26 22:26:02 字數 2781 閱讀 5114

css+div建站是現在最為常見的一種建站方式,也是搜尋引擎認可的原始碼站模式。而為了打造不同的頁面效果,在進行css建站時候還有另一屬性,這就是筆者小丹今天為大家分享的主題——css box-shadow屬性。

css box-shadow屬性可以用來給塊元素乙個陰影或內陰影,使用 border-image-* 屬性來構造漂亮的可伸縮按鈕哦!下面就讓我們仔細看看這個css屬性。

一般的語法 box-shadow屬性如下:

box-shadow: [inset] [horizontal offset] [vertical offset] [blur radius] [spread distance] [color];

即:css:(插圖) (橫向偏移量) (垂直偏移量) (模糊半徑) (傳播距離)(顏色);

css box-shadow房地產有六個可能的屬性值:

1、插圖

2、橫向偏移量

3、垂直偏移量

4、模糊半徑

5、傳播距離

6、顏色

只有兩個屬性值是必需的:水平偏移量和垂直偏移量。

四個屬性值,橫向偏移,垂直偏移,模糊半徑和傳播距離,必須使用css長度單位(例如px、em)。

顏色值必須是乙個css顏色單位如十六進製制值(例如# 000000)。

屬性值的總結

屬性值需要嗎?

單位如果沒有指定預設值

插圖沒有

關鍵字如果沒有指定插圖,盒子外的陰影將html元素。

橫向偏移量

是的長度

沒有預設值。它必須被指定。

垂直偏移量

是的長度

沒有預設值。它必須被指定。

模糊半徑

沒有長度

0傳播距離

沒有長度0顏色

沒有顏色

等於顏色屬性的html元素/ s盒陰影被應用到。 插圖

如果 inset關鍵字屬性值存在,內盒陰影將放置html元素。

橫向偏移量

水平偏移值控制x軸位置的影子,積極的價值將盒陰影,而消極的價值將它轉移到左邊。

在接下來的例子中,水平偏移量設定為20 px,或雙垂直偏移量的值(設定為10 px),所以影子是兩次廣泛的水平。

垂直偏移量

垂直偏移量控制盒陰影在y軸上的立場。積極的價值會向下移動,而負面價值將起來。

在接下來的例子中-20 px的垂直偏移量有乙個長度或雙水平偏移量(10 px)的長度,所以影子的大小是垂直軸上的兩倍。也因為該值為負,陰影的位置抵消對盒子的頂部。

模糊半徑

模糊半徑屬性值影響模糊強度/盒陰影的清晰度。

模糊半徑是可選的,如果你不指定它,它將預設為0。此外,它不能有負面價值,與水平偏移量和垂直偏移量。

如果模糊半徑為0,盒陰影將鋒利,它的顏色將固體。當你增加價值,它將變得越加模糊,更加不透明。

在下面的示例中模糊半徑值設定為20 px,因此模糊強度相當明顯。

傳播距離

傳播距離使兩盒陰影更大或更小,如果它有乙個積極的價值,盒陰影將變大。如果它有乙個負面價值,將合同各方盒陰影。

注意:因為積極的傳播距離(10 px),有乙個10 px陰影各方的盒子因為沒有水平偏移量和垂直偏移量:

當傳播距離為負時影子收縮。在接下來的例子中,影子小於框的寬度,因為其負面傳播距離和缺乏橫向偏移量:

顏色你可以通過它的名字,已經告訴顏色值集盒陰影的顏色。它可以使用任何css指定顏色,指定乙個顏色值是可選的。

如果你想要乙個不同的陰影顏色,那麼你需要指定的 box-shadow屬性值宣告。下面你可以看到,即使的前景顏色 div仍然是 red盒陰影顏色 blue。

多個框陰影

在這裡你可以得到真正有創造性地使用這個css屬性:您可以應用乙個以上的盒陰影元素。

語法如下:

box-shadow: [box shadow properties 1], [box shadow properties 2], [box shadow properties n];

即:css:[盒陰影屬性1],[2]盒陰影屬性,[n]盒陰影屬性;

換句話說,你可以有多個框陰影在每個屬性值組之間用逗號(,)。

在接下來的例子中有兩個框陰影:左上角乙個紅色的盒子和乙個藍色的右下方。

使用CL編譯器選項檢視C 類記憶體布局 轉

今天查資料的時候發現 vs 編譯器 cl 的乙個編譯選項可以檢視 c 類的記憶體布局,非常有用。使用如下,從開始程式選單找到 visual stdio 2008 2005 command prompt,選擇 vs 的命令列工具,按如下格式使用 cl d1reportsingleclasslayout...