脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS教程 >

css实现0.5像素的边框的示例代码

  发布时间：2017-09-06 11:55:37   作者：CaiBoBo   我要评论
这篇文章主要介绍了css实现0.5像素的边框,这里整理了详细的代码,非常具有实用价值，需要的朋友可以参考下

公司的设计师在做设计图的时候都是以iphone6（宽为750物理像素）为基准进行设计的。iphone6的设备像素比（即css像素与物理像素的比例）是2，所以设计师在设计图画了边框为1px的box的时候，相对于css代码来说就是0.5像素。

对于这个问题，最直观的方法就是css直接设置边框为0.5px，经过测试，iPhone可以正常显示，android下几乎所有的浏览器都会把0.5识别为0，即无边框状态，所以这种方式行不通

CSS3有缩放的属性，我们可以利用这个属性，缩小50%的1px的边框，来实现这个功能，具体实现代码如下

<div class="border3">

    <div class="content">伪类设置的边框</div>

</div>

css:

.border3{

     position: relative;          

 }

 

.border3:before{

       content: '';

       position: absolute;

       width: 200%;

       height: 200%;

       border: 1px solid red;

       -webkit-transform-origin: 0 0;

       -moz-transform-origin: 0 0;

       -ms-transform-origin: 0 0;

       -o-transform-origin: 0 0;

       transform-origin: 0 0;

       -webkit-transform: scale(0.5, 0.5);

       -ms-transform: scale(0.5, 0.5);

       -o-transform: scale(0.5, 0.5);

       transform: scale(0.5, 0.5);

       -webkit-box-sizing: border-box;

       -moz-box-sizing: border-box;

       box-sizing: border-box;

}

实现思路：

1、设定目标元素的参考位置

2、给目标元素添加一个伪元素before或者after，并设置绝对定位

3、给伪元素添加1px的边框

4、用box-sizing: border-box 属性把边框都包进宽和高里面

5、宽和高设置为 200%

6、整个盒子模型缩小为0.5

7、调整盒子模型的位置，以左上角为基准 transform-origin: 0 0;

实现结果在iphone显示如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

相关文章

  • CSS3实现多背景模拟动态边框的效果

    前几天在工作的时候遇到一个问题，项目需要实现一个效果，当鼠标移入一个元素的时候，元素出现一个动态的边框，通过网上查找资料看到有人推荐可以使用Css3来实现，后来试了
    2016-11-08

  • CSS3圆角边框和边界图片效果实例

    这篇文章主要为大家详细介绍了CSS3边框的不同效果实现代码，包括CSS3圆角边框、盒阴影、边界图片的制作方法，感兴趣的小伙伴们可以参考一下
    2016-07-01

  • 利用CSS3的线性渐变linear-gradient制作边框的示例

    linear-gradient线条用来制作边框还是比较给力的,尤其是利用其描边可以制作一些复制的边框效果,这里我们就来看一下利用CSS3的线性渐变linear-gradient制作边框的示例
    2016-06-02

  • CSS3实现多重边框的方法总结

    CSS3的box-shadow用来制作多重边框真的比较给力,这也是本文CSS3实现多重边框的方法总结的重点,不过在此之前我们还是先来看一下兼容性较好的传统方式:
    2016-05-31

  • CSS制作边框效果的技巧总结

    边框在Web页面的内容块中非常常用,这里为大家整理了CSS制作边框效果的技巧总结,尤其是第三种方案的background-origin利用十分讨巧,需要的朋友可以参考下
    2016-05-27

  • 详解CSS3的box-shadow属性制作边框阴影效果的方法

    这篇文章主要介绍了CSS3的box-shadow属性制作边框阴影效果的方法,box-shadow属性还是十分强大的,能设定阴影的水平或垂直位置,以及阴影的颜色和尺寸等,需要的朋友可以参考下
    2016-05-10

  • 利用CSS中linear制作复杂的边框效果

    这篇文章主要介绍了利用CSS中linear制作复杂的边框效果的相关资料，利用linear-gradient属性制作绚丽的边框效果
    2016-04-26

  • 探究CSS边框特效实现技巧

    半透明的边框如何实现？多重边框如何实现？这篇文章就是主要针对CSS边框特效实现技巧进行探究，感兴趣的小伙伴们可以参考一下
    2016-04-26

  • CSS border虚线边框属性教程

    这篇文章主要介绍了CSS border虚线边框属性教程，教大家如何使用css制作网页中的虚线，巩固CSS border属性使用方法，感兴趣的小伙伴们可以参考一下
    2016-04-19

  • 6种非常炫酷的CSS3按钮边框动画特效

    这篇文章主要介绍了一款效果非常炫酷的CSS3按钮边框动画特效,按钮的边框会以不同的方式进行各种动画，感兴趣的小伙伴们可以参考一下
    2016-03-16

最新评论

关注微信公众号

扫一扫