1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > div背景透明内容不透明与0.5PX边框兼容设置

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

时间:2020-07-25 06:01:36

相关推荐

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

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

参考链接:/543.html

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。