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 注 第乙個值 水平方向的距離 必須有的 支援負值 第二個值 垂直方向的距離 必須有的 支援負值 第三個值 陰影的模糊程度 不支援負值 第四個值 陰影的顏色 第乙個值 和 第二個值得位置不能互換 當給同乙個文字設定多...