阿萨
2018-03-20
来源 :网络
阅读 2370
评论 0
摘要:本系列HTML+CSS入门将给大家系统的讲解CSS的常用模式,看完这系列会让你对CSS常用模式有更加清晰的理解和运用。
本系列HTML+CSS入门将给大家系统的讲解CSS的常用模式,看完这系列会让你对CSS常用模式有更加清晰的理解和运用。
续前面的CSS布局篇,这里整理一些需求下的浏览器兼容性写法。
色彩滤镜
opacity
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
/* Good browsers */
opacity: 0.5;
灰白滤镜
.grayscale(){
filter: gray; /* For IE 6 - 9 */
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'//www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: grayscale(100%); /* For Standard */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
-webkit-filter: grayscale(1);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
居中问题
table-cell 垂直居中
.table {
height: 300px;/*高度值不能少*/
width: 300px;/*宽度值不能少*/
display: table;
position: relative;
float:left;
}
.tableCell {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 10px;
*position: absolute;
*top: 50%;
*left: 50%;
}
.content {
*position:relative;
*top: -50%;
*left: -50%;
}
行排列
inline-block IE6/7 hack
*display: inline;
*zoom: 1;
希望这篇文章可以帮助到你。总之,同学们,你想要的职坐标IT频道都能找到!
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了

请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式AI+学习就业服务平台 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号