iT邦幫忙

鐵人檔案

第 11 屆 iThome 鐵人賽
回列表
自我挑戰組

CSS 大全(第四版)閱讀筆記 系列

本系列文章將每日分享一篇CSS大全(第四版)中的心得~
預計著重於本書「十二章、Flexbox排版」、「十七章、轉場」、「十八章、動畫」單元。

鐵人鍊成 | 共 30 篇文章 | 17 人訂閱 訂閱系列文 RSS系列文
DAY 21

Day21【主題五:濾鏡、混合、裁切與遮罩】合成與混合

CSS提供決定元素合成(composited)方式的能力。 可以使用mix-blend-mode改變元素混合的方式。 CSS mix-blend-mode-...

2019-09-22 ‧ 由 Amy 分享
DAY 22

Day22【主題五:濾鏡、混合、裁切與遮罩】混合背景/裁切與遮罩

一、混合背景 backgroubd-blend-mode屬性可將元素的背景由多張影像圖片重疊。 背景圖的混合是由下到上運作的。 背景是獨立(isolation...

2019-09-23 ‧ 由 Amy 分享
DAY 23

Day23【主題五:濾鏡、混合、裁切與遮罩】裁切方框/裁切填充規則/遮罩

一、裁切方框 裁切方框部指定長度獲百分比,主要是直接使用對應方框模型的邊界。 如果同一起聲明,它將為基本形狀提供相應的參考框盒。 clip-path: mar...

2019-09-24 ‧ 由 Amy 分享
DAY 24

Day24【主題五:濾鏡、混合、裁切與遮罩】定義/模式/尺寸與重複/定位

一、定義遮罩: 用mask-image屬性指定要做為遮罩的影像圖片。 第二個影像會做為第一個影像的遮罩。 第二個影像不透明的部分會呈現出第一個影像的內容,透明...

2019-09-25 ‧ 由 Amy 分享
DAY 25

day25【主題五:濾鏡、混合、裁切與遮罩】裁切與合成遮罩、縮寫、類型、邊框、定位

一、裁切與合成遮罩 裁切:mask-clip 屬性可以限制可見元素的區域,相對於background-clip mask-clip:content-box /...

2019-09-26 ‧ 由 Amy 分享
DAY 26

day26【主題六:選擇器】筆記1

元素選擇器:通常指的是HTML元素(因為XML允許使用者建立新的標記)。 一個ID值在一份HTML文件只能出現一次,不允許用空白分隔多重值。 class和ID...

2019-09-27 ‧ 由 Amy 分享
DAY 27

day27【主題六:選擇器】筆記2

 一、選擇每間隔n個元素,:nth-child() :nth-child(1) 相當於 :first-child 可使用an+b、an-b,兩種代數運算式 實...

2019-09-28 ‧ 由 Amy 分享
DAY 28

day28【主題六:選擇器】筆記3-動態、介面狀態虛擬類別

一、超連結虛擬類別: 與頁面渲染後的結構變化與瀏覽器記錄有關的虛擬類別 a {color:green} a標籤文字顏色都是綠色 a:link {color:b...

2019-09-29 ‧ 由 Amy 分享
DAY 29

day29【主題七:邊界範圍】

邊界範圍(margin): 邊界範圍margin:指元素周圍生成額外的空白區。(透明的) 邊界重疊:指兩個以上的邊界範圍,互相重疊,只留下最大邊界範圍的過程。...

2019-09-30 ‧ 由 Amy 分享
DAY 30

day30【主題八:數值與單位】

一、全域關鍵字: inherit,強制繼承該數性使用親代設定的數值 個人在實務上inherit常應用在有些有標籤有些沒有的列表中 initial,設為預設的初...

2019-10-01 ‧ 由 Amy 分享