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:
<div id="divone"></div>
#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} }