Css 常用属性-白红宇

Css 常用属性

阅读量：5149 次

发布时间：2019-06-13

本文共 2005 字，大约阅读时间需要 6 分钟。

1. overflow:hidden和zoom：1

verflow:hidden;的作用

1. 隐藏溢出；2.消除浮动

zoom:1的作用

兼容IE6、IE7、IE8浏览器，经常会遇到一些问题，可以使用zoom:1来解决，有如下作用：

触发IE浏览器的haslayout

解决ie下的浮动，margin重叠等一些问题。

2.ul li

左导航栏的li的链接图标

.main-left ul.nav02 li a {background: url(../images/left-ico.gif) 35px -151px no-repeat;text-indent: 50px; //文本缩进color: #272727;font-weight: normal;display: block;}

3.dl dd dt

示例：

<dl>

</dl>

4.outline

经常碰到在chrome、火狐（以及360）下，input（输入框、按钮等）在得到焦点时，出现黄色（蓝色）边框

　　改变颜色

　　input {outline-color:yellow; }

　　去掉颜色

　　input{

outline:0px;} 或 input{

outline:none;}

5.背景色渐变按钮

eg：灰色按钮

.btn_gray {
       border: 1px solid #ddd;    border-radius: 2px;    margin-top: 0;    background: #f7f7f7;    text-align: center;    text-decoration: none;    cursor: pointer;    color: #333;    background: -ms-linear-gradient(top,#f7f7f7,#f2f2f2);    background: -moz-linear-gradient(top,#f7f7f7,#f2f2f2);    background: -webkit-gradient(linear,0 0,0 100%,from(#f7f7f7),to(#f2f2f2));    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr="#f7f7f7", endColorstr="#f2f2f2")";}    .btn_gray:hover {
           box-shadow: 0 1px 1px rgba(0,1,1,.08);        cursor: pointer;        color: #333;        background: -ms-linear-gradient(top,#f9f9f9,#f6f6f6);        background: -moz-linear-gradient(top,#f9f9f9,#f6f6f6);        background: -webkit-gradient(linear,0 0,0 100%,from(#f9f9f9),to(#f6f6f6));        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr="#f9f9f9", endColorstr="#f6f6f6")";    }

6.背景图片（兼容）

filter必须使用可使用的绝对路径，兼容ie处理示例：

i {
           width: 40px;        height: 40px;        display: inline-block;        background: url(images/lu_r_red.png) no-repeat;        background-size: cover;        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.nihaobaixing.com/Content/images/lu_r_red.png',sizingMethod='scale');        background-size: 40px 40px;        cursor: pointer;}