強制文本顯示
讓一段文字在固定寬度在一行顯示，最后一個字符為省略標記(...)，css樣式如下
單行顯示語法：white-space:nowrap;
div{ white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
效果：
多行文本最后省略號：
div{ display: -webkit-box; -webkit-line-clamp:2; overflow: hidden; -webkit-box-orient: vertical; text-overflow: ellipsis; }
效果：
表格語法
<table aling=left>...</table>表格位置,置左
<table aling=center>...</table>表格位置,置中
<table background=圖片路徑>...</table>背景圖片的URL=就是路徑網址
<table border=邊框大小>...</table>設定表格邊框大小(使用數字)
<table bgcolor=顏色碼>...</table>設定表格的背景顏色
<table borderclor=顏色碼>...</table>設定表格邊框的顏色
<table borderclordark=顏色碼>...</table>設定表格暗邊框的顏色
<table borderclorlight=顏色碼>...</table>設定表格亮邊框的顏色
<table cellpadding=參數>...</table>指定內容與格線之間的間距(使用數字)
<table cellspacing=參數>...</table>指定格線與格線之間的距離(使用數字)
<table cols=參數>...</table>指定表格的欄數
<table frame=參數>...</table>設定表格外框線的顯示方式
<table width=寬度>...</table>指定表格的寬度大小(使用數字)
<table height=高度>...</table>指定表格的高度大小(使用數字)
<td colspan=參數>...</td>指定儲存格合並欄的欄數(使用數字)
<td rowspan=參數>...</td>指定儲存格合並列的列數(使用數字)
設置表格中的td寬度固定table-layout:fixed
合並表格邊框border-collapse:collapse
基礎的文本陰影效果：text-shadow
h1 { text-shadow: 5px 5px 5px #FF0000; }
效果：
基礎的DIV盒子陰影效果：box-shadow
css代碼：
.demo1 { -webkit-box-shadow: 3px 3px 3px; -moz-box-shadow: 3px 3px 3px; box-shadow: 3px 3px 3px; }
//Firefox4.0-
-moz-box-shadow: 投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色;
//Safari and Google chrome10.0- -webkit-box-shadow: 投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色; //Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9 box-shadow: 投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色;
著作權歸作者所有。
商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
原文: http://www.w3cplus.com/content/css3-box-shadow © w3cplus.com
html代碼：
div class="demo1" style="width: 100px;height: 100px; border: 1px solid gray"></div>
效果：
letter-spacing字符間距
<html> <head> <style type="text/css"> h1 {letter-spacing: -0.1em} h4 {letter-spacing: 20px} </style> </head> <body> <h1>This is header 1</h1> <h4>This is header 4</h4> </body> </html>
效果：
textarea去掉右側滾動條，去掉右下角拖拽
<html> <head> </head> <body> <TEXTAREA > </TEXTAREA> <TEXTAREA style= "overflow:hidden; resize:none; "> </TEXTAREA> </body> </html>
效果：
去掉效果后文本域不可拉伸
控制文本的大小寫：text-transform
<html> <head> <style type="text/css"> h1 {text-transform: uppercase} p.uppercase {text-transform: uppercase} p.lowercase {text-transform: lowercase} p.capitalize {text-transform: capitalize} </style> </head> <body> <h1>This Is An H1 Element</h1> <p class="uppercase">This is some text in a paragraph.</p> <p class="lowercase">This is some text in a paragraph.</p> <p class="capitalize">This is some text in a paragraph.</p> </body> </html>
效果：
鼠標懸停變成小手：cursor:pointer 隨便加在樣式中
<html> <head> <style type="text/css"> h1{ cursor:pointer } </style> </head> <body> <h1>鼠標懸停變小手</h1> </body> </html>
效果：自己試試。不好截圖
li標簽去掉前面的小圓點
<html>
<head> <style type="text/css"> .list li{ list-style-type:none } </style> </head> <body> <ul> <li>1</li> <li>2</li> </ul>
<hr>
<ul class="list"> <li>1</li> <li>2</li> </ul> </body> </html>
效果：
a標簽去掉下划線
<html> <head> <style type="text/css"> .demo{ text-decoration:none; } </style> </head> <body> <a href="www.baidu.com">百度一下</a> <hr> <a href="www.baidu.com" class="demo">百度一下</a> </body> </html>
效果：
