CSS3 移动手机视网膜（Retina）屏幕上显示单位像素边界 - 使用SVG图片的解决方案

苹果手机使用Retina显示屏技术，border:1px solid会被实际显示为2px，本例说明如何在这种设备上获得一个很细的边线效果（an extra thin hairline of 1px on a retina screen）参考源： http://bit.ly/152q2d0 “Retina”是一种显示技术，可以将把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。

移动，教程

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1806
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/*  Retina-Border SASS Mixin
 *  The MIT License (MIT)
 *  Copyright (c) 2015 Malik Dellidj – @Dathink
 *
 *  The problem : 1px solid will render good on a normal screen
 *  but on a retina screen, the line width renders 2px in real
 *  This mixin helps you to get an extra thin hairline of 1px on a retina screen.
 * 
 *  – How to use : 
 *  .foo
 *    +retina-border(top $primary-color, bottom #bada55)
 *
 *  You can use : top, right, bottom, left directions in the order of your choice.
 *  The color is always after the direction, and separated by a space.
 *  Obviously if you don't specify, no border.   
 */

@charset "UTF-8";
html {
    -webkit-text-size-adjust: none;
}
body {
    background: #efeff4;
    font: normal 1em/1.45em "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-rendering: optimizeLegibility;
}
h1 {
    font-weight: 200;
    background: -webkit-linear-gradient(#c644fc, #5856d6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
a,
a:hover {
    color: #007aff;
}
p {
    color: #737278;
}
p.on-body {
    font-size: 0.9em;
    line-height: 1.305em;
}
ul.ios-list {
    background: repeat-x top url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'><rect x='0' y='0' width='1' height='0.5' fill='#c8c7cc'/></svg>"), repeat-x bottom url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'><rect x='0' y='0.5' width='1' height='0.5' fill='#c8c7cc'/></svg>");
    background-color: #fff;
}
ul li {
    background: repeat-x bottom url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'><rect x='0' y='0.5' width='1' height='0.5' fill='#d7d7da'/></svg>");
    padding: 0.65em 0.65em 0.65em 0;
    margin-left: 1.5em;
    position: relative;
}
ul li:last-child {
    background: none;
}
ul li .fa-chevron-right {
    color: #c5c4c9;
    position: absolute;
    right: 0.65em;
    top: 50%;
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}
.fa-heart {
    color: #ff2d55;
}

HTML

移动，教程

编辑器支持Emmet

快捷键

移动，教程

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：