div背景透明内容不透明与0.5PX边框兼容设置

时间：2024-01-21 17:36:51

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>

CSS代码：

/* 定位 */

.position_box{

    width: 200px;

    height: 200px;

    position: relative;

}

/* 给内容定位，提升层级 */

.content{

    position: relative;

    z-index:;

    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%;

}

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

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

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

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

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

相关文章