postcss-border-1px

@lcs/postcss-border-1px

使用方式

1. 通过npm下载包 postcss-border-1px;

npm i postcss-border-1px -d -s

2. webpack loader 中配置postcss，vue-cli3内置了postcss

3. 有两种方法引入@lcs/postcss-border-1px

1. 根目录创建 postcss-config.js，引入@lcs/postcss-border-1px

  module.exports = {
    plugins: [
      require('postcss-border-1px')
    ]
}

1. 如果是vue-cli3及以上项目，你还可以在vue.config.js中配置

module.exports = {
  css: {
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          require('postcss-border-1px')，
        ]
      }
    }
  },
}

页面中使用

.demo {
    color: white;
    border: 1px solid red;
    border-radius: 20px;
}

tip:border:0;不会被转换

支持添加注释

• border: 1px solid red;/* non */ 不转换该属性
• border: 1px solid red;/* before */ 创建::before
• border: 1px solid red;/* after */ 创建::after 默认是创建after

案例

使用之前:

.demo_border{
  border: 1px solid red;
}

使用之后:

.demo_border::after{
  border: 1px solid red;
  content: '';
  position: absolute;
  top: -50%;
  bottom: -50%;
  left: -50%;
  right: -50%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  pointer-events: none;
}

tip:

1. input、img、select 无法容纳其他元素，因此它不支持伪元素。所以在这类元素中，尽管插件能为其加入伪元素，但是仍然无法生效。
2. 当你使用标签选择器 input\img\select 时，插件会自动过滤掉此元素。

仓库地址 http://gitlab.yintech.net/lcs-bj/server/fe_components/postcss-border-1px