CSS效果常見問題
詳細解答參見上篇部落格
問題1.如何用 div 畫一個 xxx
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常見問題CSS
- css 常見問題CSS
- 前端常見問題(一) - CSS前端CSS
- CSS選擇器常見問題CSS
- HTML + CSS處理常見問題HTMLCSS
- IE瀏覽器下常見的CSS相容問題瀏覽器CSS
- 【Nginx】常見問題Nginx
- js常見問題JS
- Git 常見問題Git
- PHP 常見問題PHP
- swiper常見問題
- nginx 常見問題Nginx
- java 常見問題Java
- MyBatis常見問題MyBatis
- 前端常見問題前端
- Git常見問題Git
- SQLServer常見問題SQLServer
- HTML常見問題HTML
- PyMongo 常見問題Go
- xhtml常見問題HTML
- UITableview 常見問題UIView
- mysql常見問題MySql
- MySQL 常見問題MySql
- BlockUI常見問題BloCUI
- Oracle常見問題一千問Oracle
- 編寫HTML頁面常見的CSS樣式問題HTMLCSS
- 前端入門-day2(常見css問題及解答)前端CSS
- 網易iTownSDK常見問題
- weex常見問題解析
- sonar常見問題分析
- Linux 常見問題Linux
- Redis面試常見問題Redis面試
- 常見面試SQL問題面試SQL
- 前端常見問題整理前端
- ReactNative常見問題React
- Devexpress常見問題devExpress
- 前端常見問題 - vue前端Vue
- 常見問題總結