盒模型與盒子陰影

2021-09-28 19:43:04 字數 805 閱讀 2621

對所有的盒子在瀏覽器中所佔據的空間進行計算

只要在瀏覽器中【佔據位置】的html元素,都是我們計算的盒子。

寬度:width 高度:height 內邊距:padding 邊框:border-width 外邊距:margin

盒子分類:邊框盒子(ie預設)和內容盒子(谷歌預設)

邊框盒子在瀏覽器中佔據空間 = width * height

內容盒子在瀏覽器佔據的空間 = width + border-width + padding + height + margin

內容盒子:width height決定盒子容納多少東西;隨著其他變化;盒子在瀏覽器中佔據的位置也變化。

邊框盒子:width height決定盒子在父容器中佔據的位置,其他變化只會改變盒子能容納多少東西。

box-shadow的取值:

none:無陰影

length:第 1 個長度值定義元素的陰影水平偏移值。正值,陰影出現在元素右側;負值,則陰影出現在元素左側

length:第 2 個長度值定義元素的陰影垂直偏移值。正值,陰影出現在元素底部;負值,則陰影出現在元素頂部

length:第 3 個長度值定義元素的陰影模糊值半徑(如果提供了)。該值越大陰影邊緣越模糊,若該值為0,陰影邊緣不出現模糊。不允許負值

length:第 4 個長度值定義元素的陰影外延值(如果提供了)。正值,陰影將向四面擴充套件;負值,則陰影向里收縮

color:定義元素陰影的顏色。如果該值未定義,陰影顏色將預設取當前最近的文字顏色

inset:定義元素的陰影型別為內陰影。該值為空時,則元素的陰影型別為**影

盒子陰影與文字陰影

1.如何給盒子新增陰影 box shadow 水平偏移 垂直偏移 模糊度 陰影擴充套件 陰影顏色 內外陰影 2.注意點 2.1盒子的陰影分為內外陰影,預設情況下就是外陰影 2.2快速新增陰影只需要編寫三個引數即可 box shadow 水平偏移 垂直偏移 模糊度 預設情況下陰影的顏色和盒子內容的顏色...

文字陰影與盒子陰影

1 文字陰影屬性 語法 text shadow 10px 10px 10px red 注 第乙個值 水平方向的距離 必須有的 支援負值 第二個值 垂直方向的距離 必須有的 支援負值 第三個值 陰影的模糊程度 不支援負值 第四個值 陰影的顏色 第乙個值 和 第二個值得位置不能互換 當給同乙個文字設定多...

14 盒模型陰影box shadow

以逗號分割列表來描述乙個或多個陰影效果,可以用到幾乎任何元素上。如果元素同時設定了 border radius 陰影也會有圓角效果。多個陰影時和多個 text shadows 規則相同 第乙個陰影在最上面 預設值 none 不可繼承 值 inset 預設陰影在邊框外。使用inset後,陰影在邊框內。...