盒子顯隱 陰影 形變

2022-08-21 08:39:10 字數 1140 閱讀 1248

1.顯示效果

display:none;# 沒有任何顯示效果

/*消失的時候在頁面不佔位置,顯示的時候在頁面佔位置

*/

2.盒子透明度

opacity:0; # 所在區域留白

/*消失顯示在頁面中都佔位

*/

總結:只要盒子在頁面中有佔位,就會影響其他盒子布局,所以顯隱的盒子都需要做定位布局處理。

opacity可以做動畫處理,display不能做動畫處理。

overflow屬性解決的問題:超出盒子規定的顯示區域外的內容的處理方式

/*將超出規定區域的內容隱藏,隱藏掉的內容無法直接檢視

*/overflow:hidden;

/*不超出正常,超出滾動,兩種不同的處理方式來處理超出規定區域的內容

*/overflow:auto;

/*一直以滾動的方式處理超出規定區域的內容

*/overflow:scroll;

偽類設計的邊框不佔位,偽類 :before |  :after

.box .box:before

/*

語法:box-shadow: x軸偏移 y軸偏移 虛化程度 陰影寬度陰影顏色,...;

注:1.盒子陰影是乙個獨立的顯示圖層,永遠出現在背景層之下(即使背景層透明,也會被覆蓋遮擋)

2.盒子可以繫結多套陰影圖層

3.陰影圖層永遠相對於顯示層進行偏移

*/

/*

形變參考點(盒子左上角原點)

transform-origin:x軸座標 y軸座標;

形變屬性

transform:rotate() translate() scale();

旋轉角度(deg)偏移距離(px)縮放比例(無單位)

總結:1.形變多個效果要同時賦值給transform屬性

transform:rotate(1080deg) translatex(-300px); # 1

2.屬性值之間的先後順序往往也會導致過程的不同

tranform:translatex(-300px) rotate(1080deg); # 2過程的運動效果與1不同

*/

盒子陰影 文字陰影

css3中新增了盒子陰影,我們可以使用box shadow屬性為盒子新增陰影。語法 box shadow h shadow v shadow blur spread color inset 值 描述h shadow 必須。水平陰影的位置。允許負值。v shadow 必須。垂直陰影的位置。允許負值。b...

盒子陰影與文字陰影

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

文字陰影與盒子陰影

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