[TOC] <br/><br/><br/> # <b style="color:#4F4F4F;">簡介說明</b> ``` 版本：邊框背景 作用：邊框背景 ``` <br/> # <b style="color:#4F4F4F;">邊框背景</b> <br/> # <span style="color:#619BE4">object-position</span> ***** 指定可替換元素的內容在其內容框中的位置 <br/> ### 參數說明 <b style="color:#808080;">str:</b> * 類型：字符串 * 默認值：無 * 描述：x y偏移位置 * 可選值：[ ] <br/> # <span style="color:#619BE4">object-fit</span> ***** 指定可替換元素的內容應該如何適應到其使用的高度和寬度確定的框，元素需要設置寬高100%，默認是fill <br/> ### 參數說明 <b style="color:#808080;">str:</b> * 類型：字符串 * 默認值：無 * 描述：模式 * 可選值：[ contain | cover | fill | none | scale-down ] <br/> # <span style="color:#619BE4">[fut]-object-view-box</span> ***** 允許您使用一行 CSS 來平移、縮放、裁剪 圖像 <br/> # <span style="color:#619BE4">~~[aba]-clip~~</span> ***** 定義了元素的哪一部分是可見的，必須有position: absolute;的屬性 <br/> ### 參數說明 <b style="color:#808080;">str:</b> * 類型：字符串 * 默認值：無 * 描述：裁切圖像 * 可選值：[ rect ] <br/> # <span style="color:#619BE4">[fut]-clip-path</span> ***** 裁切圖像，配合形狀函數使用 <br/> # <span style="color:#619BE4">filter</span> ***** 將模糊或顏色偏移等圖形效果應用于元素 <br/> ### 參數說明 <b style="color:#808080;">str:</b> * 類型：字符串 * 默認值：無 * 描述：濾鏡 * 可選值：[ ] <br/> # <span style="color:#619BE4">backdrop-filter</span> ***** 為一個元素后面區域添加圖形效果（如模糊或顏色偏移） <br/> # <span style="color:#619BE4">opacity</span> ***** 設置透明度 <br/> ### 參數說明 <b style="color:#808080;">str:</b> * 類型：字符串 * 默認值：無 * 描述：透明度取值范圍0-1 * 可選值：[ ] <br/> # <span style="color:#619BE4">background</span> ***** 背景樣式 <br/> ### 參數說明 <b style="color:#808080;">background-color:</b> * 類型：字符串 * 默認值：無 * 描述：背景顏色 * 可選值：[ ] <b style="color:#808080;">background-image:</b> * 類型：字符串 * 默認值：無 * 描述：背景圖片，可以使用漸變函數生成圖片，該屬性存在于background-color上層 * 可選值：[ ] <b style="color:#808080;">background-repeat:</b> * 類型：字符串 * 默認值：無 * 描述：是否重復背景圖片元素 * 可選值：[ ] <b style="color:#808080;">background-position:</b> * 類型：字符串 * 默認值：無 * 描述：背景圖片位置選取，定位圖片位置 * 可選值：[ ] <b style="color:#808080;">background-attachment:</b> * 類型：字符串 * 默認值：無 * 描述：是否固定背景不讓其跟隨滾動 * 可選值：[ scroll | fixed | inherit ] <br/> ### 示例內容 <span style="color:red">1. 舉例說明</span> ``` background: url("./images/a.jpg") no-repeat 0 0; background-origin: border-box; ``` <br/> # <span style="color:#619BE4">background-size</span> ***** 指定背景圖片大小，可選【cover--按照背景最長邊進行按比例放大或縮小】,【contain--圖片按照背景最短邊進行按比例放大或縮小】 <br/> ### 參數說明 <b style="color:#808080;">width:</b> * 類型：字符串 * 默認值：無 * 描述：寬度 * 可選值：[ ] <b style="color:#808080;">height:</b> * 類型：字符串 * 默認值：無 * 描述：高度 * 可選值：[ ] <br/> # <span style="color:#619BE4">background-origin</span> ***** 指定背景圖片background-image 屬性的原點位置的背景相對區域，設置該屬性會影響background-position的偏移位置 <br/> ### 參數說明 <b style="color:#808080;">str:</b> * 類型：字符串 * 默認值：無 * 描述：padding-box * 可選值：[ padding-box | border-box | content-box ] <br/> # <span style="color:#619BE4">background-clip</span> ***** 對背景顏色進行裁剪，指定裁剪到哪一個區域中 <br/> ### 參數說明 <b style="color:#808080;">str:</b> * 類型：字符串 * 默認值：無 * 描述：裁剪到的指定區域 * 可選值：[ padding-box | border-box | content-box | text ] <br/> ### 示例內容 <span style="color:red">1. 舉例說明</span> ``` width: 500px; height: 500px; border: 100px dashed red background: url("./images/a.jpg") no-repeat 0 0; background-origin: border-box; background-clip: border-box; 注意子屬性一定要寫到父屬性底下 ``` <br/> # <span style="color:#619BE4">[fut]-background-blend-mode</span> ***** 定義元素背景層的混合模式 <br/> ### 示例內容 <span style="color:red">1. 舉例說明</span>  <br/> # <span style="color:#619BE4">border-image</span> ***** 給border（邊框）貼上背景圖像 <br/> ### 參數說明 <b style="color:#808080;">border-image-source:</b> * 類型：字符串 * 默認值：無 * 描述：圖片源 * 可選值：[ ] <b style="color:#808080;">border-image-slice:</b> * 類型：字符串 * 默認值：無 * 描述：指定圖像邊框的向內偏移 * 可選值：[ 上 | 右 | 下 | 左 ]  圖像外層的八份空間就是顯示的內容  <br/> <b style="color:#808080;">border-image-width:</b> * 類型：字符串 * 默認值：無 * 描述：邊框背景寬度 * 可選值：[ ] <b style="color:#808080;">border-image-outset:</b> * 類型：字符串 * 默認值：無 * 描述：邊框背景向外擴散 * 可選值：[ ] <b style="color:#808080;">border-image-repeat:</b> * 類型：字符串 * 默認值：無 * 描述：重復性,可設置水平和垂直方向 * 可選值：[ repeat | round | stretch ] <br/> <br/> ### 示例內容 <span style="color:red">1. 舉例說明</span> ``` border: 30px solid transparent; border-image: url("https://mdn.mozillademos.org/files/4127/border.png"); ``` <span style="color:red">2. 圖像擴散</span> ``` border: 100px solid transparent; border-image: url("./images/a.jpg"); border-image-outset: 0 0; ``` <span style="color:red">3. 圖像裁剪</span> ``` width: 500px; height: 500px; border: 100px solid transparent; border-image: url("./images/icon.png"); border-image-slice: 192 192 192 50%; ``` <br/> # <span style="color:#619BE4">border-radius</span> ***** 設置塊狀元素四個角的圓角大小 <br/> ### 參數說明 <b style="color:#808080;">x/y:</b> * 類型：字符串 * 默認值：無 * 描述：如果只寫/前的參數圓角是正圓，補充/后面的參數將控制為一個橢圓，案例參考mdn * 可選值：[ ] <br/> # <span style="color:#619BE4">box-shadow</span> ***** 設置盒子陰影樣式，可以為元素制作影分身 <br/> ### 參數說明 <b style="color:#808080;">h-shadow:</b> * 類型：字符串 * 默認值：無 * 描述：必需。x偏移量。允許負值。 * 可選值：[ ] <b style="color:#808080;">v-shadow:</b> * 類型：字符串 * 默認值：無 * 描述：必需。y偏移量。允許負值。 * 可選值：[ ] <b style="color:#808080;">blur:</b> * 類型：字符串 * 默認值：無 * 描述：可選。陰影模糊半徑。 * 可選值：[ ] <b style="color:#808080;">spread:</b> * 類型：字符串 * 默認值：無 * 描述：可選。陰影擴散半徑。 * 可選值：[ ] <b style="color:#808080;">color:</b> * 類型：字符串 * 默認值：無 * 描述：可選。陰影的顏色。請參閱 CSS 顏色值。 * 可選值：[ ] <b style="color:#808080;">inset:</b> * 類型：字符串 * 默認值：無 * 描述：可選。將外部陰影 (outset) 改為內部陰影。 * 可選值：[ ] <br/> # <span style="color:#619BE4">outline</span> ***** 設置所有的輪廓屬性，輪廓不占據空間，繪制于元素內容周圍 <br/> ### 參數說明 <b style="color:#808080;">outline-color:</b> * 類型：字符串 * 默認值：無 * 描述：規定邊框的顏色。 * 可選值：[ ] <b style="color:#808080;">outline-style:</b> * 類型：字符串 * 默認值：none * 描述：規定邊框的樣式。 * 可選值：[ none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit ] <b style="color:#808080;">outline-width:</b> * 類型：字符串 * 默認值：medium * 描述：規定邊框的寬度。 * 可選值：[ medium | thin | thick | length | inherit ] <b style="color:#808080;">inherit:</b> * 類型：字符串 * 默認值：無 * 描述：規定應該從父元素繼承 outline 屬性的設置。 * 可選值：[ ] <br/> # <span style="color:#619BE4">border</span> ***** 邊框屬性 <br/> ### 參數說明 <b style="color:#808080;">border-width:</b> * 類型：字符串 * 默認值：無 * 描述：邊框寬度 * 可選值：[ ] <b style="color:#808080;">border-style:</b> * 類型：字符串 * 默認值：無 * 描述：邊框樣式 * 可選值：[ ] <b style="color:#808080;">border-color:</b> * 類型：字符串 * 默認值：無 * 描述：邊框顏色 * 可選值：[ ] <br/> # <span style="color:#619BE4">[fut]-mask</span> ***** 設置遮罩層，mask 顏色越深顯示越清晰 <br/> # <span style="color:#619BE4">[fut]-mask-image</span> ***** 設置元素上遮罩層的圖 <br/> ### 示例內容 <span style="color:red">1. 舉例說明</span> ``` #masked { width: 100px; height: 100px; background-color: #8cffa0; mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); } <div id="masked">看到我的遮罩了么</div> ``` <span style="color:red">2. 舉例說明</span> ``` .g-wegame { position: absolute; width: 100vw; height: 100vh; background: linear-gradient(-75deg, #715633, #2B2522); mask-image: url("../assets/logo.svg"), linear-gradient(#FFFFFF, #FFFFFF); mask-repeat: no-repeat; mask-position: center center; mask-composite: exclude; } ``` <br/> # <span style="color:#619BE4">[fut]-mask-mode</span> ***** 指示由mask-image 指向的遮罩被視為亮度或阿爾法遮罩 <br/> # <span style="color:#619BE4">[fut]-mask-repeat</span> ***** 定義了遮罩圖片是否重復顯示多個副本 <br/> # <span style="color:#619BE4">[fut]-mask-position</span> ***** 定義遮罩圖片偏移位置 <br/> # <span style="color:#619BE4">[fut]-mask-clip</span> ***** 確定受蒙版影響的區域 <br/> # <span style="color:#619BE4">[fut]-mask-origin</span> ***** 遮罩圖變換原點 <br/> # <span style="color:#619BE4">[fut]-mask-size</span> ***** 遮罩圖大小 <br/> # <span style="color:#619BE4">[fut]-mask-type</span> ***** 設置將SVG mask元素用作亮度還是alpha蒙版 <br/> # <span style="color:#619BE4">[fut]-mask-composite</span> ***** 表示在當前蒙版層及其下面的蒙版層上使用的合成操作 <br/> # <span style="color:#619BE4">[fut]-mix-blend-mode</span> ***** 主要是用于源與背景顏色或背景圖像混合 <br/> ### 參數說明 <b style="color:#808080;">str:</b> * 類型：字符串 * 默認值：無 * 描述：混合模式 * 可選值：[ ] <br/> ### 示例內容 <span style="color:red">1. 舉例說明</span>  <br/> # <span style="color:#619BE4">[fut]-isolation</span> ***** 主要用來設置源是否與其他元素隔離，隔離元素不進行混合 <br/>