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

转载于:https://www.cnblogs.com/zxjwlh/p/6415481.html

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

css3实现0.5px边框、圆角渐变色边框+圆角渐变色背景
效果图 0.5px边框 0.5px边框,可以用伪元素实现,before.after都可以.移动端H5页面用的比较多. 圆角渐变色边框+圆角渐变色背景实现外部圆角边框,内部圆角渐变色背景,是用父div ...
css设置背景透明兼容,每日一更之CSS背景透明内容不透明及CSS兼容性写法
有一个浏览器,让所有的前端极度痛恨,没错,就是IE.IE9以上版本的浏览器还好,但是,IE9及以下浏览器就相当的恶心,对于前端来说,最基本的就是还原UI设计图,但是当你使用一些CSS3属性的时候,IE ...
css实现背景透明内容不透明
首先实现透明的方式大家肯定都能想到opacity,但opacity会让背景及其子元素的所有内容都透明 http://www.html5code.net/webdesign/html-5396.html ...
[转]retina屏下支持0.5px边框的情况
2014-12-31更新: 截至到IOS8.1,safari仍不支持@supports 待safari支持@supports, 就可以利用0.5px了! 2014-7-25更新: 1. 修正dpr = ...
0.5px边框，css及sass
手机上的边框,1px的宽度已经无法满足需求了,0.5px的需求应用而生. 做法: 利用伪类,做一个长宽200%,1px宽度的边框,再缩小至0.5倍. div {position: relative; ...
div填充透明背景但是内容不透明
让div有透明度而不影响内容,不能使用opacity:0.5,因为它会让内容也透明化:不影响内容要使用background:rgba(),rgba分别代表的是红色.绿色.蓝色和透明度(括号内的值分别对 ...
CSS 实现 0.5px 边框线
原有元素要添加 position: relative; ::before伪元素一点要加z-index属性保证原有元素处于后加元素上层,否则会导致原有元素上点击等事件触发不了 <div class ...
如何实现0.5px边框
1.border+border-image+linear-gradient的方式 <div class="border"></div>.border{wid ...
[前端CSS高频面试题]如何画0.5px的边框线（详解）
往期css3文章详解 CSS3中最好用的布局方式--flex弹性布局(看完就会) CSS3基础属性大全 CSS3动画属性 animation详解(看完就会) CSS3 transform 2D转换之 ...

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

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

最新文章

热门文章