zoukankan      html  css  js  c++  java
  • css一像素问题

    在生活中有很多美好的事情,但也有一些不如人意的事,同样在我们前端也一样.就举一个简单的列子:如果你在设置css样式的时候你想设置一个底边框为1px的线条就会写(

    border-bottom: solid 1px #000),你看到的结果真的是1px吗?错了,这个时候计算机会很大方的给你2px,解决方法如下(我们利用伪类,定位和缩放来实现)
    第一种方法:首先给父元素来个position:relative;接着写伪类
      
    .item::after{
                    content:'';
                    display: block;
                     100%;
                    /* 设置盒子高1px (实际上是2px)*/
                    height: 1px;
                    /* 实际上border-bottom的高度为2px */
                    border-bottom: 1px solid #000;
                    background: transparent;
                    left:0;
                    /* 将盒子1px的高度隐藏掉 */
                    bottom:-1px;
                    /* 将border-bottom高度缩放一半 */
                    transform:scaleY(0.5);
                }

     第二种方法:我们直接给整个页面进行缩放(实际上为两像素的物体我们缩放一半是不是就是只有1px了)

    <meta name="viewport" content="width=device-width,initial-scale=0.5,minimum-scale=0.5,maximum-scale=0.5,user-scalable=no" />
  • 相关阅读:
    CSS——实现图像远距离翻转效果
    《精通CSS》一个下拉菜单的例子
    将博客搬至CSDN
    44个Java代码性能优化总结
    QRCode 二维码生成
    Linux命令
    spring
    ajax 学习总结
    Servlet+Ajax实现搜索框智能提示代码
    搜索框智能提示
  • 原文地址:https://www.cnblogs.com/tc-jieke/p/9226431.html
Copyright © 2011-2022 走看看