[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/>