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