zoukankan      html  css  js  c++  java
  • div背景透明内容不透明与0.5PX边框兼容设置

    1、问题:设置 border-width:0.5px;  并兼容安卓和苹果移动端。

       兼容:苹果IOS的 safari 支持浮点数边框,安卓浏览器不支持,会四舍五入到1px。不同浏览器效果额不同

       解决方案:设置2层嵌套的div,最外层的用来定位,保障我们设置的内容不会脱离原先的文档流。

             里层设置两个div,一个用来书写内容,一个用来专门设置边框

    HTML代码 :

    <!-- position_box用来定位,控制该区域在原文档流中的位置 -->
    <div class="position_box">
         <!--填充内容,不用position_box是因为如果要设置圆角+背景色,就有些麻烦,border也不能用,被缩放了--> 
        <div class="content">边框为0.5px</div>
        <!-- 专属用来设置0.5px的边框,圆角,以及背景色 -->
        <div class="border"></div>
    </div>
    View Code

    CSS代码:

    /* 定位 */
    .position_box{
        width: 200px;
        height: 200px;
        position: relative;
    }
    /* 给内容定位,提升层级 */
    .content{
        position: relative;
        z-index: 2;
        padding: 10px;
    }
    /* 边框设置,圆角,背景色 */
    .border{
        /* 边框颜色,背景色,圆角  */
        background-color: aquamarine;
        border: 1px solid red;
        border-radius:10px;
        /* 缩放比例 */
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        /* 强制拉伸 */
        position: absolute;
        top: -50%;
        left: -50%;
        right: -50%;
        bottom: -50%;
    }
    View Code

    2、问题:如何设置一个div的背景色透明度,但使其内容不透明

       原理:这个解决方案其实就跟上面的解决方案一样了,将背景色和内容分离在两个不同的div(容器)中,再用外层一个div(容器)包裹起来,然后分别做各自的设置,就可以了

       代码: 同上面的代码,直接修改上面设置 border 的css属性即可,或者直接加 opacity: 0.75;

    如果您还有其他的更加巧妙的方法,欢迎您留言,先行表示感谢

    参考链接:http://www.zhangyunling.com/543.html

  • 相关阅读:
    VOL.1 利用vmware ThinApp 制作非XP下可以运行的IE6 【无插件版】(windows vista/7/8 x86/x64 )
    js中each的用法
    Math函数floor、round、ceil的区别
    JS中的prototype解析
    Ubuntu虚拟机搭建
    我的第一篇blog
    实验四+124+高小娟
    实验三+124+高小娟
    第5次作业+105032014124+高小娟
    第4次作业类测试代码+105032014124+高小娟
  • 原文地址:https://www.cnblogs.com/zxjwlh/p/6415481.html
Copyright © 2011-2022 走看看