CSS效果常見問題

2021-09-20 05:25:18 字數 737 閱讀 6300

詳細解答參見上篇部落格

問題1.如何用 div 畫乙個 ***

box-shadow 無限投影 (堆疊成複雜圖案)

::before

::after

問題2.如何產生不佔空間的邊框

1.box-shadow

2.outline

問題3.如何實現圓形元素(頭像)

border-radius:50%

問題4.如何實現ios圖示的圓角

1.將設計圖形匯入向量設計軟體導成 svg

2.用 clip-path:(svg)製作圓角圖示

問題5.如何實現半圓、扇形等圖形

border-radius 組合:1.有無邊框 2.邊框粗細 3.圓角半徑

問題6.如何實現背景圖居中顯示/不重複/改變大小

background-position / background-repeat / background-size(cover/contain)

問題7.如何平移、放大乙個元素(transform 跟動畫沒有關係)

transform:translatex(100px)

transform:scale(2)

問題8.如何實現3d效果

1.perspective:500px(指定透視角度大小)

2.transform-style:preserve-3d(選擇3d效果,不然是2d效果)

3.transform:translate rotate(變換)

CSS常見問題

viewport fit,它有三個可選值 contain 可視視窗完全包含網頁內容 cover 網頁內容完全覆蓋可視視窗 auto 同contain的作用.box box after在flex多行布局中,justify content space between 這個屬性如果最後一行元素沒有填滿,會...

CSS常見問題

viewport fit,它有三個可選值 contain 可視視窗完全包含網頁內容 cover 網頁內容完全覆蓋可視視窗 auto 同contain的作用.box box after在flex多行布局中,justify content space between 這個屬性如果最後一行元素沒有填滿,會...

CSS常見問題

viewport fit,它有三個可選值 contain 可視視窗完全包含網頁內容 cover 網頁內容完全覆蓋可視視窗 auto 同contain的作用.box box after在flex多行布局中,justify content space between 這個屬性如果最後一行元素沒有填滿,會...