## 单边 0.5 px 1. border + border-image + 线性渐变linear-gradient 2. 定位 + 伪元素 + background + 线性渐变linear-gradient 3. 定位 + 伪元素 + transform ### 1. border + border-image + 线性渐变linear-gradient ``` .border { width: 200px; height: 200px; border: 1px solid transparent; border-image: linear-gradient(to bottom,transparent 50%, red 50%) 0 0 100%/1px 0; } ``` #### border-image * border-image-source: 图片链接 * border-image-slice： 裁剪位置（1～4个参数） * border-image-width: 宽 * border-image-outset: 0; * border-image-repeat: stretch; ### 2. 定位 + 伪元素 + background + 线性渐变linear-gradient ``` .border { width: 200px; height: 200px; position: relavite } .border::before { content: ''; position: absolute; width: 100%; height: 1px; left: 0; bottom: 0; background: linear-gradient(to bottom, transparent 50%, red 50%); } ``` ### 3. 伪元素 + 定位 + 缩放 ``` .border { width: 200px; height: 200px; position: relative; } .border::before { content: ''; position: absolute; width: 100%; height: 1px; left: 0; bottom: 0; background: red; transform: scaleY(0.5); } ``` ## 四边 0.5 ``` .border::before { content: ''; position: absolute; width: 200%; height: 200%; left: 0; bottom: 0; border: 1px solid red; transform: scale(0.5); transform-origin: 0 100%; } ```