Skip to content

R
retain.css
Commit f7f21ca4 by zhengxiao
Options

Initial commit

parents
Showing with 548 additions and 0 deletions
.gitignore 0 → 100644
.DS_Store
.cache
.idea
.vscode
**/.yarn/*
!**/.yarn/releases
!**/.yarn/plugins
dist
coverage
node_modules
npm-debug.log
yarn-error.log
README.md 0 → 100644
# 使用方式
## 在html中使用
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="retain.min.css">
<style>
.btn {
width: 150px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 14px;
margin: 20px;
}
.box {
width: 375px;
margin: 0 auto;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
/* 覆盖默认线框颜色和圆角 */
[retain] {
--retain-border-color: #000000;
--retain-border-radius: 10px;
}
</style>
</head>
<body>
<div class="box">
<div retain="border:top" class="btn">上边框</div>
<div retain="border:bottom" class="btn">下边框</div>
<div retain="border:left" class="btn">左边框</div>
<div retain="border:right" class="btn">右边框</div>
<div retain="border" class="btn">四周边框</div>
<div retain="round" class="btn">四周边框(圆角)</div>
</div>
</body>
</html>
```
Install with npm:
```shell
npm install retain.css --save
```
Install with yarn:
```shell
yarn add retain.css
```
## 在css中使用
```css
@import url('retain.min.css');
```
- 在css中使用，只需要在css文件中引入retain.css即可。
## 在入口文件js中使用
```js
import 'retain.min.css'
```
index.css 0 → 100644
/*retain 1px border start*/
/*
retainbt: 上边框
retainbb: 下边框
retainbl: 左边框
retainbr: 右边框
retainb: 四周边框
retainbRound: 四周边框(圆角)
*/
.retainbt,
.retainbb,
.retainbl,
.retainbr,
.retainb,
.retainbRound {
position: relative;
position: relative !important;
}
.retainbt:before,
.retainbb:after {
pointer-events: none;
position: absolute;
content: '';
height: 1px;
background: rgba(0, 0, 0, 0.2);
left: 0;
right: 0;
}
.retainbt:before {
top: 0;
}
.retainbb:after {
bottom: 0;
}
.retainbl:before,
.retainbr:after {
pointer-events: none;
position: absolute;
content: '';
width: 1px;
background: rgba(0, 0, 0, 0.2);
top: 0;
bottom: 0;
}
.retainbl:before {
left: 0;
}
.retainbr:after {
right: 0;
}
.retainb:after {
position: absolute;
content: '';
top: 0;
left: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
border: 1px solid rgba(0, 0, 0, 0.2);
pointer-events: none;
}
.retainbRound:after {
position: absolute;
content: '';
top: 0;
left: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 10px;
border: 1px solid rgba(0, 0, 0, 0.2);
pointer-events: none;
}
@media (-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi),
(min-resolution: 1.5dppx) {
.retainbt:before,
.retainbb:after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.retainbl:before,
.retainbr:after {
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
}
.retainb:after,
.retainbRound:after {
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
.retainbt:before,
.retainbl:before,
.retainb:after,
.retainbRound:after {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.retainbb:after,
.retainbr:after {
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
}
@media (-webkit-device-pixel-ratio: 1.5) {
.retainbt:before,
.retainbb:after {
-webkit-transform: scaleY(0.6666);
transform: scaleY(0.6666);
}
.retainbl:before,
.retainbr:after {
-webkit-transform: scaleX(0.6666);
transform: scaleX(0.6666);
}
.retainb:after,
.retainbRound:after {
width: 150%;
height: 150%;
-webkit-transform: scale(0.6666);
transform: scale(0.6666);
}
}
@media (-webkit-device-pixel-ratio: 3) {
.retainbt:before,
.retainbb:after {
-webkit-transform: scaleY(0.3333);
transform: scaleY(0.3333);
}
.retainbl:before,
.retainbr:after {
-webkit-transform: scaleX(0.3333);
transform: scaleX(0.3333);
}
.retainb:after,
.retainbRound:after {
width: 300%;
height: 300%;
-webkit-transform: scale(0.3333);
transform: scale(0.3333);
}
}
/* retain 1px border end */
\ No newline at end of file
index.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="retain.css">
<style>
.btn {
width: 150px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 14px;
margin: 20px;
}
.box {
width: 375px;
margin: 0 auto;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
[retain] {
--retain-border-color: #999999;
--retain-border-radius: 10px;
}
</style>
</head>
<body>
<div class="box">
<div retain="border:top" class="btn">上边框</div>
<div retain="border:bottom" class="btn">下边框</div>
<div retain="border:left" class="btn">左边框</div>
<div retain="border:right" class="btn">右边框</div>
<div retain="border" class="btn">四周边框</div>
<div retain="round" class="btn">四周边框(圆角)</div>
</div>
</body>
</html>
\ No newline at end of file
package.json 0 → 100644
{
"name": "retain.css",
"version": "1.0.3",
"description": "移动端0.5px边框线",
"main": "retain.css",
"style": "retain.css",
"scripts": {
"prod": "npx postcss retain.css -o retain.min.css --no-map --env production"
},
"author": "zhengxiao",
"license": "MIT",
"files": [
"README.md",
"LICENSE.md",
"retain.css",
"retain.min.css"
],
"browserslist": [
"> 3%",
"last 2 versions"
],
"dependencies": {
"cssnano": "^6.0.1",
"postcss": "^8.4.31",
"postcss-cli": "^10.1.0",
"postcss-header": "^3.0.3",
"postcss-import": "^15.1.0",
"postcss-preset-env": "^9.3.0"
}
}
postcss.config.js 0 → 100644
const fs = require('fs');
const { version, author } = JSON.parse(fs.readFileSync('package.json'));
const header = `
@charset "UTF-8";
/*!
* retain.css
* Version - ${version}
* Licensed under the Hippocratic License 2.1 - http://firstdonoharm.dev
*
* Copyright (c) ${new Date().getFullYear()} ${author}
*/
`;
module.exports = (ctx) => {
const devMessage = `🎉🎉🎉🎉 \nretain.css ${ctx.env} build was compiled sucessfully! \n`;
console.log(devMessage);
return {
map: ctx.options.map,
parser: ctx.options.parser,
plugins: {
'postcss-import': { root: ctx.file.dirname },
'postcss-preset-env': {
autoprefixer: {
cascade: false,
},
features: {
'custom-properties': true,
},
},
cssnano: ctx.env === 'production' ? {} : false,
'postcss-header': {
header,
},
},
};
};
retain.css 0 → 100644
/*retain 1px border start*/
/*
<div retain="border:top" class="btn">上边框</div>
<div retain="border:bottom" class="btn">下边框</div>
<div retain="border:left" class="btn">左边框</div>
<div retain="border:right" class="btn">右边框</div>
<div retain="border" class="btn">四周边框</div>
<div retain="round" class="btn">四周边框(圆角)</div>
*/
[retain] {
--retain-border-color: #d4d4d4;
--retain-border-radius: 40px;
position: relative;
position: relative !important;
}
[retain~="border:top"]:before,
[retain~="border:bottom"]:after {
pointer-events: none;
position: absolute;
content: '';
height: 1px;
background: var(--retain-border-color);
left: 0;
right: 0;
}
[retain~="border:top"]:before {
top: 0;
}
[retain~="border:bottom"]:after {
bottom: 0;
}
[retain~="border:left"]:before,
[retain~="border:right"]:after {
pointer-events: none;
position: absolute;
content: '';
width: 1px;
background: var(--retain-border-color);
top: 0;
bottom: 0;
}
[retain~="border:left"]:before {
left: 0;
}
[retain~="border:right"]:after {
right: 0;
}
[retain~="border"]:after {
position: absolute;
content: '';
top: 0;
left: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
border: 1px solid var(--retain-border-color);
pointer-events: none;
}
[retain~="round"]:after {
position: absolute;
content: '';
top: 0;
left: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: var(--retain-border-radius);
border: 1px solid var(--retain-border-color);
pointer-events: none;
}
@media (-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi),
(min-resolution: 1.5dppx) {
[retain~="border:top"]:before,
[retain~="border:bottom"]:after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
[retain~="border:left"]:before,
[retain~="border:right"]:after {
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
}
[retain~="border"]:after,
[retain~="round"]:after {
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
[retain~="border:top"]:before,
[retain~="border:left"]:before,
[retain~="border"]:after,
[retain~="round"]:after {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
[retain~="border:bottom"]:after,
[retain~="border:right"]:after {
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
}
@media (-webkit-device-pixel-ratio: 1.5) {
[retain~="border:top"]:before,
[retain~="border:bottom"]:after {
-webkit-transform: scaleY(0.6666);
transform: scaleY(0.6666);
}
[retain~="border:left"]:before,
[retain~="border:right"]:after {
-webkit-transform: scaleX(0.6666);
transform: scaleX(0.6666);
}
[retain~="border"]:after,
[retain~="round"]:after {
width: 150%;
height: 150%;
-webkit-transform: scale(0.6666);
transform: scale(0.6666);
}
}
@media (-webkit-device-pixel-ratio: 3) {
[retain~="border:top"]:before,
[retain~="border:bottom"]:after {
-webkit-transform: scaleY(0.3333);
transform: scaleY(0.3333);
}
[retain~="border:left"]:before,
[retain~="border:right"]:after {
-webkit-transform: scaleX(0.3333);
transform: scaleX(0.3333);
}
[retain~="border"]:after,
[retain~="round"]:after {
width: 300%;
height: 300%;
-webkit-transform: scale(0.3333);
transform: scale(0.3333);
}
}
/* retain 1px border end */
\ No newline at end of file
retain.min.css 0 → 100644
@charset "UTF-8";
/*!
* retain.css
* Version - 1.0.1
* Licensed under the Hippocratic License 2.1 - http://firstdonoharm.dev
*
* Copyright (c) 2023 zhengxiao
*/[retain]{--retain-border-color:#d4d4d4;--retain-border-radius:40px;position:relative;position:relative!important}[retain~="border:bottom"]:after,[retain~="border:top"]:before{background:var(--retain-border-color);content:"";height:1px;left:0;pointer-events:none;position:absolute;right:0}[retain~="border:top"]:before{top:0}[retain~="border:bottom"]:after{bottom:0}[retain~="border:left"]:before,[retain~="border:right"]:after{background:var(--retain-border-color);bottom:0;content:"";pointer-events:none;position:absolute;top:0;width:1px}[retain~="border:left"]:before{left:0}[retain~="border:right"]:after{right:0}[retain~=border]:after{border:1px solid var(--retain-border-color)}[retain~=border]:after,[retain~=round]:after{-webkit-box-sizing:border-box;box-sizing:border-box;content:"";height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}[retain~=round]:after{border:1px solid var(--retain-border-color);border-radius:var(--retain-border-radius)}@media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5),(min-resolution:1.5dppx),(min-resolution:144dpi){[retain~="border:bottom"]:after,[retain~="border:top"]:before{-webkit-transform:scaleY(.5);transform:scaleY(.5)}[retain~="border:left"]:before,[retain~="border:right"]:after{-webkit-transform:scaleX(.5);transform:scaleX(.5)}[retain~=border]:after,[retain~=round]:after{height:200%;-webkit-transform:scale(.5);transform:scale(.5);width:200%}[retain~="border:left"]:before,[retain~="border:top"]:before,[retain~=border]:after,[retain~=round]:after{-webkit-transform-origin:0 0;transform-origin:0 0}[retain~="border:bottom"]:after,[retain~="border:right"]:after{-webkit-transform-origin:100% 100%;transform-origin:100% 100%}}@media (-webkit-device-pixel-ratio:1.5){[retain~="border:bottom"]:after,[retain~="border:top"]:before{-webkit-transform:scaleY(.6666);transform:scaleY(.6666)}[retain~="border:left"]:before,[retain~="border:right"]:after{-webkit-transform:scaleX(.6666);transform:scaleX(.6666)}[retain~=border]:after,[retain~=round]:after{height:150%;-webkit-transform:scale(.6666);transform:scale(.6666);width:150%}}@media (-webkit-device-pixel-ratio:3){[retain~="border:bottom"]:after,[retain~="border:top"]:before{-webkit-transform:scaleY(.3333);transform:scaleY(.3333)}[retain~="border:left"]:before,[retain~="border:right"]:after{-webkit-transform:scaleX(.3333);transform:scaleX(.3333)}[retain~=border]:after,[retain~=round]:after{height:300%;-webkit-transform:scale(.3333);transform:scale(.3333);width:300%}}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment