Comments (2)
@mingjiu 这种也是OK,设置boder,然后放大至原div的位置
from ppts.
@mingjiu 可以的,由于这篇PPT是很久以前写的,甚至ios9都已经直接支持border-width: 0.5px
的写法了,这里推荐结一老师@marvin1023 的终极解决方案
// retina border
// 0.5px实现 ios9
@mixin retina-one-px() {
@supports (border-width: 0.5px) {
@media only screen and (-webkit-min-device-pixel-ratio: 2), screen and (-webkit-min-device-pixel-ratio: 3) {
border-width: 0.5px;
}
}
}
// linear-gradient实现
// 安卓4.3- 不支持background-size的百分比
@mixin retina-one-px-bg($direction: top, $color: $colorBorder) {
background-repeat: no-repeat;
@if $direction == top {
background-image: linear-gradient(to bottom, $color 50%, transparent 50%);
background-size: 100% 1px;
}
@if $direction == bottom {
background-image: linear-gradient(to top, $color 50%, transparent 50%);
background-size: 100% 1px;
background-position: left bottom;
}
@if $direction == left {
background-image: linear-gradient(to right, $color 50%, transparent 50%);
background-size: 1px 100%;
}
@if $direction == right {
background-image: linear-gradient(to left, $color 50%, transparent 50%);
background-size: 1px 100%;
background-position: right top;
}
@if $direction == v { // 左右两个边框
background-image: linear-gradient(to right, $color 50%, transparent 50%),linear-gradient(to left, $color 50%, transparent 50%);
background-size: 1px 100%;
background-position: left top, right top;
}
@if $direction == h { // 上下两个边框
background-image: linear-gradient(to bottom, $color 50%, transparent 50%), linear-gradient(to top, $color 50%, transparent 50%);
background-size: 100% 1px;
background-position: left top, left bottom;
}
@if $direction == all { // 上下左右四个边框
background-image: linear-gradient(to bottom, $color 50%, transparent 50%), linear-gradient(to top, $color 50%, transparent 50%), linear-gradient(to right, $color 50%, transparent 50%),linear-gradient(to left, $color 50%, transparent 50%);
background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
background-position: left top, left bottom, left top, right top;
}
}
// border和transform实现
// 注意before和after的层级问题
@mixin retina-one-px-border($direction: top, $color: $colorBorder) {
position: absolute;
left: 0;
top: 0;
box-sizing: border-box;
@if $direction == top or $direction == bottom{
right: 0;
height: 0;
transform: scaleY(0.5);
border-top: 1px solid $color;
}
@if $direction == bottom {
top: auto;
bottom: 0;
}
@if $direction == right or $direction == left{
width: 0;
bottom: 0;
transform: scaleX(0.5);
border-left: 1px solid $color;
}
@if $direction == right {
left: auto;
right: 0;
}
@if $direction == all {
width: 200%;
height: 200%;
transform-origin: left top;
transform: scale(0.5);
border: 1px solid $color;
}
}
// border top & bottom
%border-tb {
position: relative;
&::before {
content: "";
@include retina-one-px-border(top);
z-index: 1;
}
&::after {
content: "";
@include retina-one-px-border(bottom);
}
}
// border all
%border-all {
position: relative;
&::before {
content: "";
@include retina-one-px-border(all);
z-index: -1;
}
}
以上代码出自https://github.com/marvin1023/sandal/blob/master/core/_mixin.scss
from ppts.
Related Issues (2)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ppts.