css 完美替换图片

1.css替换简单图标的展示方法

.box1 span{width:0px;height:0px;font-size:0;display:inline-block;position:absolute;left:11px;top:10px;border-right:6px solid transparent;border-top:50px solid #f00}
.box2 span{width:0px;height:0px;font-size:0;display:inline-block;position:absolute;left:11px;top:100px;border-right:50px solid transparent;border-top:10px solid #ddd}
.box21 span{width:0px;height:0px;font-size:0;display:inline-block;position:absolute;left:111px;top:100px;border-right:50px solid #ddd;border-bottom:50px solid transparent}
.box3 span{width:0px;height:0px;font-size:0;display:inline-block;position:absolute;left:11px;top:200px;border:10px solid #000;border-color:transparent transparent transparent #f00}
.box4 span{width:0px;height:0px;font-size:0;display:inline-block;position:absolute;left:11px;top:300px;border:10px solid #000;border-color:transparent transparent #f00 transparent}
.box5 span{width:0px;height:0px;font-size:0;display:inline-block;position:absolute;left:11px;top:400px;border:10px solid #000;border-bottom:10px solid transparent}
.box6 span,
.box6 span i{width:0px;height:0px;font-size:0;display:inline-block;position:absolute;left:11px;top:500px;border:8px solid #000;border-color:transparent transparent #000 transparent}
.box6 span i{left:-7px;top:-6px;border:7px solid #fff;border-color:transparent transparent #fff transparent}
.box7 span,
.box7 span i{width:0px;height:0px;font-size:0;display:inline-block;position:absolute;left:11px;top:600px;border:50px solid #f00;border-color:transparent transparent transparent #f00}
.box7 span i{left:-50px;top:-30px;border:30px solid #fff;border-color:transparent transparent transparent #fff}

</style>

<body>
<div class="box1 box2 box3 box4 box5">
<span></span>
</div>

<div class="box6 box7">
<span><i></i></span>
</div>

2.css3 新方法的代码和效果

1）border-radius:

#divone{
     200px;
    height: 200px;
    border: 1px solid red;
    border-radius: 15px;
}

可以写为 : -moz-border-radius

-webkit-border-radius:

#divone{
    width: 200px;
    height: 200px;
    border: 1px solid red;
    border-radius:0px 15px 25px 45px;
}

border-radius:1 2 3 4 分别代表的是左上角右上角右下角左下角

2)box-shadow 只有chrome 和 safair 支持这个阴影的效果

#divone{
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    background:#fff;
    box-shadow:13px -11px 10px #333;
}

box-shadow:1 2 3 4 分别代表的值是阴影左边的距离，阴影右边的距离，阴影清晰度颜色

3)resize overflow

#divone{
    width: 100px;
    height: 100px;
    border: 1px solid #000;   
    resize: both;   
    overflow: auto;  
}

右下角可以进行缩放

4）css 多栏布局

-webkit-column-count:4

-webkit-column-gap:20px;

column-count: 栏数 column-栏宽 column-gap:各栏之间的空白间隔如果没有设定column-count：在允许宽范围内尽可能多的增加栏目

#divone{  
     -webkit-column-count : 4;  
     -webkit-column-gap : 20px;  
     -moz-column-count : 4;  
     -moz-column-gap : 20px;
     column-rule: 1px solid #00000;
 }

5) word-wrap:属性是用来防止太长的字符串溢出，可以用两个属性值 normal 和 break-word

normal 是默认的只允许在断电截断文字，break-word 文字可以在任何需要的地方截断匹配分配的空间并防止溢出

6)媒体查询

@media all and(max-480px){
    #divdone{width:400px;height：400px;backgroundL:red}
}