逆戰班 盒子陰影

2021-10-03 09:17:57 字數 898 閱讀 5025

盒子陰影

box-shadow 屬性用於向盒子新增乙個或多個陰影效果。

offset-x:陰影的水平偏移量。正數向右偏移,負數向左偏移。

offset-y:陰影的垂直偏移量。正數向下偏移,負數向上偏移。

blur:陰影模糊度,不能取負數。

spread:陰影大小。正數陰影擴大(陰影大小大於盒子大小),負數陰影縮小(陰影大小小於盒子大小),0陰影與盒子同等大小。

inset:表示新增內陰影,預設為**影。

1.inset: 陰影型別, 可選值。 如果不設定, 其預設的投影方式是**影; 如果取其唯一值「 inset」, 就是給元素設定內陰影。

2.x-offset:陰影水平偏移量, 其值可以是正負值。 如果取正值, 則陰影在元素的右邊, 反之, 陰影在元素的左邊。

3.y-offset:陰影垂直偏移量, 其值可以是正負值。 如果取正值, 則陰影在元素的底部, 反之, 陰影在元素的頂部。

4.blur- radius:陰影模糊半徑, 可選引數。 其值只能是正值, 如果取值 為「 0」 時, 表示陰影不具有模糊效果, 如果取值越大, 陰影的邊緣就越模糊。

5.spread- radius: 陰影擴充套件半徑, 可選引數。 其值可以是正負值, 如果取值為正值, 則整個陰影都延展擴大, 反之, 則整個陰影都縮小。

6.color: 陰影顏色, 可選引數, 如果不設定任何顏色 時, 瀏覽器會取預設色, 但各瀏覽器 預設色不一樣,

在上加內陰影,先給新增乙個容器,如:div等

CSS3陰影屬性(逆戰班)

李小龍 box 文字陰影屬性 text shadow 6px 6px 3px orange 使用 第乙個值 水平方向的距離 必須有的 支援負值 第二個值 垂直方向的距離 必須有的 支援負值 第三個值 陰影的模糊程度 不支援負值 第四個值 陰影的顏色 注意 第乙個值 和 第二個值得位置不能互換 給同乙...

HTML 盒模型 逆戰班

對於前端專案是css布局的基石,它主要作用是控制元素和元素之間,或者元素和內容之間的位置關係,是重要的組成部分。乙個盒子主要有五大屬性分別為width height padding border margin。分別含義 width指的是內容的寬度 height指的是內容的高度 padding內邊距 ...

專案總結逆戰班 侯宇航

專案總結 看問題的角度,不能總以自己的思維去尋找答案,要多用專業名詞,有時候請教前輩會讓你換乙個思路去思考問題,適當的轉換思維往往離解決問題更進一步 2在敲 的過程中,要慢慢學會思考每一步的流程,必要的話可以使用思維導圖記下每乙個步驟,然後再寫 會讓你大腦思路變得清晰,並且更加專注。3在遇到不會的問...