====== 差别 ======
这里会显示出您选择的修订版和当前版本之间的差别。
| 两侧同时换到之前的修订记录 前一修订版 后一修订版 | 前一修订版 | ||
|
移动端_0.5px [2021/09/16 14:45] admin |
移动端_0.5px [2021/09/16 14:47] (当前版本) admin |
||
|---|---|---|---|
| 行 1: | 行 1: | ||
| # 如何实现0.5px细边框 | # 如何实现0.5px细边框 | ||
| - | 有几种方法能实现0.5px边框： | + | 做移动端开发的时候，如果边框直接设置 1px的宽度，可能视觉上还是太粗无法满足设计师的要求。下面是实现0.5px边框的几种方案。 推荐方案4，复杂度中等，扩展性良好，兼容性好。 |
| - | 方案1. 直接设置 border-width: | ||
| - | 方案2. 用阴影代替边框，设置阴影box-shadow: | ||
| - | 方案3. 给容器设置伪元素，设置绝对定位，高度为1px，背景图为线性渐变，一半有颜色，一半透明。视觉上宽度只有0.5px。这种方法适合设置一条边框，没法展示圆角。 | + | **方案1.** 直接设置 |
| - | 方案4. 给容器内设置伪元素，设置绝对定位，宽、高是200%，边框是1px，然后使用transform: scale(0.5) 让伪元素缩小原来的一半，这时候伪元素的边框和容器的边缘重合，视觉上宽度只有0.5px。这种方法兼容性最好，4个边框都能一次性设置，能正常展示圆角，推荐使用。 | + | **方案2.** 用阴影代替边框，设置阴影box-shadow: 0 0 0 .5px #000; 使用方便，能正常展示圆角，兼容性一般。 |
| + | **方案3.** 给容器设置伪元素，设置绝对定位，高度为1px，背景图为线性渐变，一半有颜色，一半透明。视觉上宽度只有0.5px。这种方法适合设置一条边框，没法展示圆角。 | ||
| + | **方案4.** 给容器内设置伪元素，设置绝对定位，宽、高是200%，边框是1px，然后使用transform: | ||
| 行 19: | 行 19: | ||
| - | ## 方案 | ||
| - | 做移动端开发的时候，如果边框直接设置 1px的宽度，可能视觉上还是太粗无法满足设计师的要求。下面是实现0.5px边框的几种方案。 推荐方案4，复杂度中等，扩展性良好，兼容性好。 | ||
| - | ```html | + | |
| + | ## 代码实现和测试 | ||
| + | |||
| + | |||
| + | ```css | ||
| <div class=" | <div class=" | ||
| <div class=" | <div class=" | ||
admin · 2021/09/16 14:45 · 移动端_0.5px.1631774740.txt.gz
