iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 12
0
自我挑戰組

自我挑戰日記系列 第 12

CSS:background-clip 裁切

  • 分享至 

  • xImage
  •  

大家好 /images/emoticon/emoticon37.gif

今天要作的是裁切範圍
裁切範圍也包括一個很有趣的效果
就是用顏色或圖片填色的文字

先做裁切漸層文字

background: 
    -webkit-linear-gradient(top,#f82 0,#222 100%);
	/* 單色、漸層色,也可使用圖片 */
	-webkit-background-clip: text;
	/* 用文字作容器裁切背景,另外也可用 border-box | padding-box | content-box */
	-webkit-text-fill-color: transparent;
	/* 字體填入設定的 顏色 / 圖片 */

https://ithelp.ithome.com.tw/upload/images/20171217/20107496kd9WrxSuVN.jpg
用這效果作出的標題可減少製作圖檔及出現圖片壓縮後的雜點

裁切範圍 : border-box | padding-box | content-box

.border-box { background-clip: border-box; }

https://ithelp.ithome.com.tw/upload/images/20171217/20107496UszCOsuQD7.jpg
border-box 範圍在 border 外圍
border 的粗細會影響到裁切範圍

.padding-box { background-clip: padding-box; }

https://ithelp.ithome.com.tw/upload/images/20171217/20107496Kh3TDyb3Q1.jpg
padding-box 範圍在 border 之內
依外框大小決定
不管 border 粗細和內文的多少

.content-box { background-clip: content-box; }

https://ithelp.ithome.com.tw/upload/images/20171217/2010749689TzHLSG9n.jpg
content-box 範圍是文字框
不論外框大小
範圍就只有文字的部分

--- 明日待續。


上一篇
CSS:background 圓錐形漸變
下一篇
CSS:text-stroke 文字外框
系列文
自我挑戰日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言