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边框兼容设置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。