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

最新推荐文章于 2021-06-21 00:20:59 发布

weixin_34245169

最新推荐文章于 2021-06-21 00:20:59 发布

阅读量213

点赞数

原文链接：http://www.cnblogs.com/zxjwlh/p/6415481.html

版权

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