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>
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
div背景透明内容不透明与0.5PX边框兼容设置的更多相关文章
- 实现0.5px边框线
实现0.5px边框方法 方案一:利用渐变(原理:高度1px,背景渐变,一半有颜色,一半透明) CSS部分 .container { width: 500px; margin: 0px auto; } ...
- css写出0.5px边框(一)
在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0. ...
- 兼容IE、Firefox的背景半透明内容不透明设置
首先要说明的是背景是内容的祖先元素.如果是兄弟节点那就没有必要记录这篇文章了. 记录一下,知其然也知其所以然. IE8-特点: 1.不支持"opcity:0.5;"这种写法,只支持 ...
- [转]retina屏下支持0.5px边框的情况
2014-12-31更新:截至到IOS8.1,safari仍不支持@supports待safari支持@supports, 就可以利用0.5px了! 2014-7-25更新:1. 修正dpr = 1. ...
- CSS3实现0.5px边框
用CSS设置边框宽度为0.5px,可以使边框看起来更加细腻,特别是在移动端,设计师会有这样的要求. 但遗憾的是,大多数Android手机并不能识别0.5px.因此我们可以使用CSS3来变通的实现0.5 ...
- background背景透明内容不透明
.demo{ padding: 25px; background-color:#000000;/* IE6和部分IE7内核的浏览器(如QQ浏览器)下颜色被覆盖 */ background-color: ...
- 通过IE私有滤镜让IE6 7 8支持背景透明,内容不透明效果。
CSS3已经支持背景rgba的rgba透明度,这一方法可以避免元素内容也随背景一起变透明(详情请阅http://www.cssha.com/css3-new-knowledge-student).但是 ...
- 利用CSS背景颜色属性使父级div背景透明同时避免子级标签透明。
实现背景色透明效果的代码 实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性. 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及C ...
- 移动端 Retina屏border实现0.5px
首先来看一下造成Retina边框变粗的原因 其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRat ...
随机推荐
- PHP 4种输出的方式
<?php //测试用的数组 $info = array('11'=>'aaa', '22'=>'bbb', '33'=>'ccc'); //第一种,将整个数组作为一个对象输出 ...
- [转] python 模块学习 hashlib
转自: http://www.cnblogs.com/BeginMan/p/3328172.html 一.hashlib概述 涉及加密服务:14. Cryptographic Services 其中 ...
- Dining POJ - 3281
题意: f个食物,d杯饮料,每个牛都有想吃的食物和想喝的饮料,但食物和饮料每个只有一份 求最多能满足多少头牛.... 解析: 一道简单的无源汇拆点最大流 无源汇的一个最大流,先建立超级源s和超级汇 ...
- windows 系统无法安装
1. 提示windows 无法安装到这个磁盘,选中的磁盘具有MBR分区表. Windows cannot be installed to this disk.the selected disk has ...
- Java创建文件
public class FileTest { public static void main(String[] args) throws IOException { File file = new ...
- 对STM32库函数中 assert 函数的认知
> 本段代码取自 <stm32f4xx_gpio.c> > 可以看出进入函数第一件事就是做 assert 输入参数检查,参数合法后,根据参数做相应操作 /** * @brief ...
- Java中线程池的实现原理-求职必备
jdk1.5引入Executor线程池框架,通过它把任务的提交和执行进行解耦,只需要定义好任务,然后提交给线程池,而不用关心该任务是如何执行.被哪个线程执行,以及什么时候执行. 初始化线程池(4种) ...
- NHibernate使用简单示例
NHibernate使用小示例 1.新建Model类库项目. 使用代码生成器生成Model类. 此处以简单的UserInfo表作为示例. 注意字段前必须以 virtual 修饰. namespace ...
- Mac上配置idea的项目上传到GitHub
1.安装git,Mac默认已经安装了Git,可以通过命令git —version查询一下. 2.创建SSH KEY(如果已经创建过,则不用再次创建.查看~/.ssh/id_rsa.pub是否存在) 生 ...
- typescript函数(笔记非干货)
函数类型 Function Type 为函数定义类型 Define types for functions 我们可以给每个参数添加类型之后再为函数本身添加返回值类型. TypeScript能够根据返回 ...