[CSS] 切版眉角的部份


Posted by Nicolakacha on 2020-09-06

這篇主要會放我切版的時候遇到問題或覺得值得記錄的知識點:

圖片底部留白怎麼辦?

圖片預設是 display: inline,為了解決底部留白,改成 display: block 就可以了

怎麼做背景圖的櫥窗效果?

背景圖的櫥窗效果:設定 background-attachment: fixed

為什麼我的 margin 重疊惹?

margin 之間如果沒有其他障礙物,若兩個物件都是 block,就會發生 margin collapse

怎麼做書籤列的小 icon?

利用 Favicon Generator
一定要是矩形,最小尺寸 16*16
建議用 32*32 當標準

小圖標怎麼做?

使用 Font Awesome 的服務,它的底層技術是 icon font,所以放大不會糊掉,可以像給字體上顏色一樣換顏色,但是只能單色

CSS Sprites 怎麼做?

用 Sprties Generator 把圖片組合整理成一張圖片.PNG
用容器顯示出該 icon 位置

Flex 子層物件會自動把高度和父層等高

漸層效果怎麼弄啊啊啊?

background-image: linear-gradient(角度, 色標, 色標)
0度是由下往上
90度是由左往右

三角形怎麼切啊?

當然是利用 border 來切呀

- .border__box{
width: 100px;
height: 100px;
border-top: 50px solid #f00;
border-right: 50px solid #0f0;
border-left: 50px solid #00f;
border-bottom: 50px solid #AAA;
}

毛玻璃怎麼做?

backdrop-filter: blur(5px);

為何不用萬能選取器?

* 萬能選取器因為效能考量所以不太使用

display 怎麼做垂直居中

父層設 display: flex,子層設 margin 會把空間自動分配,可以達到垂直居中。
margin-top: auto;
margin-bottom: auto;

使用 svg 顯示圖示怎麼弄啊?

background: url('logo.svg')

怎麼讓表格中每個儲存格維持等寬?

table-layout: fixed

flex 怎麼把子物件的空白均分裡面的

justify-content: space-evenly

幫沒有 class 的連結設定預設樣式

a[href]:not([class])

等比例區塊怎麼做?

width: 40%
padding-bottom: 40%

使用 :root 選擇器來設定彈性的字體大小

:root {
font-size: calc(1vw + 1vh + 0.5vmin)
}

img 如果設定 max-width: 100%,代表最大不能超過圖片本身的尺寸


#切版







Related Posts

再戰原型鏈

再戰原型鏈

讓code更簡潔

讓code更簡潔

[Release Notes] 20210813_v1 - Support add Post canonical url

[Release Notes] 20210813_v1 - Support add Post canonical url


Comments