32 |
上边框
33 |
34 |
右边框
35 |
36 |
下边框
37 |
38 |
左边框
39 |
40 |
上下边框
41 |
42 |
左右边框
43 |
44 |
上左边框
45 |
46 |
上右边框
47 |
48 |
下左边框
49 |
50 |
下右边框
51 |
52 |
上左右边框
53 |
54 |
下左右边框
55 |
56 |
全边框
57 |
58 |
圆角
59 |
60 |
虚线
61 |
62 |
单边虚线
63 |
64 |
双边虚线
65 |
66 |
hr
67 |
68 |
HelloWorld
69 |
class="hr"
70 |
71 |
在模拟器高dpr下，边框会细到看不清。用手机浏览器效果更佳。
72 |
73 |
74 |
75 |
--------------------------------------------------------------------------------
/1px.less:
--------------------------------------------------------------------------------
1 | /**
2 | * https://github.com/yscoder/border-1px
3 | */
4 |
5 | @color-border: #ccc;
6 | @border-radius-size: 4px;
7 |
8 | .border-scale(@s) {
9 | -webkit-transform: scale(@s);
10 | transform: scale(@s);
11 | }
12 | .border-postion(@x, @y) {
13 | -webkit-transform-origin: @x @y;
14 | transform-origin: @x @y;
15 | }
16 |
17 | .bd() {
18 | border-width: 0;
19 | border-color: @color-border;
20 | border-style: solid;
21 | }
22 |
23 | .ratina-bd(@dpr) {
24 |
25 | &::before {
26 | width: 100% * @dpr;
27 | height: 100% * @dpr;
28 | .border-scale(1/@dpr);
29 | }
30 | }
31 |
32 | .bd-t {
33 | .bd;
34 | border-top-width: 1px;
35 | }
36 | .bd-r {
37 | .bd;
38 | border-right-width: 1px;
39 | }
40 | .bd-b {
41 | .bd;
42 | border-bottom-width: 1px;
43 | }
44 | .bd-l {
45 | .bd;
46 | border-left-width: 1px;
47 | }
48 | .bd-all {
49 | .bd;
50 | border-width: 1px;
51 | }
52 | .bd-radius {
53 | .bd-all;
54 | border-radius: @border-radius-size;
55 | }
56 | .bd-dashed {
57 | border-style: dashed!important;
58 | }
59 |
60 | hr {
61 | border: none;
62 | }
63 | hr,
64 | .hr {
65 | margin: .7em 0;
66 | width: 100%;
67 | height: 1px;
68 | background: @color-border;
69 | overflow: hidden;
70 | }
71 |
72 | @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
73 | .ratina-bd {
74 | position: relative;
75 | border: none!important;
76 |
77 | &::before {
78 | content: '';
79 | position: absolute;
80 | top: 0;
81 | left: 0;
82 | .bd;
83 | .border-postion(0, 0);
84 | pointer-events: none;
85 | }
86 |
87 | .ratina-bd(1.5);
88 |
89 | &.bd-t {
90 | &::before {
91 | border-top-width: 1px;
92 | }
93 | }
94 |
95 | &.bd-r {
96 | &::before {
97 | border-right-width: 1px;
98 | }
99 | }
100 |
101 | &.bd-b {
102 | &::before {
103 | border-bottom-width: 1px;
104 | }
105 | }
106 |
107 | &.bd-l {
108 | &::before {
109 | border-left-width: 1px;
110 | }
111 | }
112 |
113 | &.bd-all {
114 | &::before {
115 | border-width: 1px;
116 | }
117 | }
118 |
119 | &.bd-radius {
120 | &::before {
121 | border-width: 1px;
122 | border-radius: @border-radius-size * 1.5;
123 | }
124 | }
125 |
126 | &.bd-dashed {
127 | &::before {
128 | border-style: dashed!important;
129 | }
130 | }
131 |
132 | }
133 |
134 | hr,
135 | .hr {
136 | width: 100% * 1.5;
137 | .border-scale(1/1.5);
138 | -webkit-transform-origin: 0 0;
139 | transform-origin: 0 0;
140 | }
141 | }
142 |
143 | @media screen and (-webkit-min-device-pixel-ratio: 2) {
144 | .ratina-bd {
145 | .ratina-bd(2);
146 |
147 | &.bd-radius {
148 | &::before {
149 | border-radius: @border-radius-size * 2;
150 | }
151 | }
152 | }
153 |
154 | hr,
155 | .hr {
156 | width: 100% * 2;
157 | .border-scale(1/2);
158 | }
159 | }
160 |
161 | @media screen and (-webkit-min-device-pixel-ratio: 3) {
162 | .ratina-bd {
163 | .ratina-bd(3);
164 |
165 | &.bd-radius {
166 | &::before {
167 | border-radius: @border-radius-size * 3;
168 | }
169 | }
170 | }
171 |
172 | hr,
173 | .hr {
174 | width: 100% * 3;
175 | .border-scale(1/3);
176 | }
177 | }
178 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # border-1px
2 | 解决移动端border问题。可定义任意单边框到全边框、圆角、虚线以及分割线等样式。
3 |
4 | ## 在线预览
5 |
6 | http://www.imys.net/demo/border-1px/
7 |
--------------------------------------------------------------------------------