APIbeta

Retina边框

使用如下示例代码可以在retina屏幕下生成1px的细边框, 用于listView等组件可使得视觉效果更佳.

1
2
3
4
5
6
7
8
<style lang="scss">
@import '@bpui/style';

div {
  // 使用mixin的方式引入.
  @include bp-thinBorder(#fff);
}
</style>

只有一个mixin会生效

example

See the Pen bpui-style-thinBorder by brainpoint (@brainpoint) on CodePen.

bp-thinBorder

全边框

1
@include bp-thinBorder(颜色值);

bp-thinBorderTop

上边框

1
@include bp-thinBorderTop(颜色值);

bp-thinBorderBottom

下边框

1
@include bp-thinBorderBottom(颜色值);

bp-thinBorderLeft

左边框

1
@include bp-thinBorderLeft(颜色值);

bp-thinBorderRight

右边框

1
@include bp-thinBorderRight(颜色值);

bp-thinBorderTopLeft

左上边框

1
@include bp-thinBorderTopLeft(颜色值);
← 0基础样式