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{
width: 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-width:欄寬 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-width:480px){ #divdone{width:400px;height：400px;backgroundL:red} }