當(dāng)通過把overflow屬性的屬性值設(shè)定為”hidden”的方法，將盒中容納不下的內(nèi)容隱藏起來時(shí)，如果使用text-overflow屬性，可以在盒的末尾顯示一個(gè)代表省略號(hào)”…”。但是，text-overflow屬性只在當(dāng)盒中的內(nèi)容在水平方向上超出盒的容納范圍時(shí)有效。例子如下：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>text-overflow屬性使用示例</title>
<style>
div{
white-space: nowrap;
width:300px;
border:solid 1px orange;
overflow: hidden;
text-overflow:ellipsis;
}
</style></head><body><div>炸彈阿薩德阿薩德 沙雕暗示的薩達(dá)薩達(dá)阿薩德</div></body></html>
box-shadow屬性的使用方法
在css3中，可以使用box-shadow屬性讓盒在顯示時(shí)產(chǎn)生陰影效果。寫法如下：
box-shadow:length length length color
其中，前面三個(gè)length分別指陰影離開文字的橫向距離、陰影離開文字的縱向距離和陰影的模糊半徑，color指陰影的顏色。
例子如下：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>box-shadow屬性使用示例</title>
<style>
div{
background-color: #ffaa00;
box-shadow:10px 10px 10px gray;
width: 200px;
height: 100px;
-moz-box-shadow: 10px 10px 10px gray;
-webkit-box-shadow: 10px 10px 10px gray;
}
</style></head><body><div></div></body></html>
對(duì)盒內(nèi)子元素使用陰影
可以單獨(dú)對(duì)盒內(nèi)的子元素使用陰影，例子如下：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>對(duì)盒內(nèi)子元素使用陰影的示例</title>
<style>
span {
background-color: #ffaa00;
-moz-box-shadow: 10px 10px 10px gray;
}
span {
background-color: #ffaa00;
-webkit-box-shadow: 10px 10px 10px gray;
}
</style></head><body><div>按時(shí)大大阿薩德阿薩德薩達(dá)<span>阿薩德阿薩德薩達(dá)阿薩德阿薩德</span>
按時(shí)大大阿薩德阿薩德薩達(dá)<span>阿薩德阿薩德薩達(dá)阿薩德阿薩德</span></div></body></html>
對(duì)第一個(gè)文字或第一行使用陰影
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>對(duì)第一個(gè)文字使用陰影的示例</title>
<style>
div:first-letter{
font-size: 22px;
float:left;
background-color: #ffaa00;
-webkit-box-shadow: 5px 5px 5px gray;
}
div:first-letter{
font-size: 22px;
float:left;
background-color: #ffaa00;
-moz-box-shadow: 5px 5px 5px gray;
}
</style></head><body><div>示例文字</div></body></html>
對(duì)表格及單元格使用陰影
可以使用box-shadow屬性讓表格及表格內(nèi)的單元格產(chǎn)生陰影效果。
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>使用box-shadow屬性讓表格及單元格產(chǎn)生陰影效果的示例</title>
<style>
table {
border-spacing: 10px;
-webkit-box-shadow: 5px 5px 20px gray;
-moz-box-shadow: 5px 5px 20px gray;
}
td {
background-color: #ffaa00;
-webkit-box-shadow: 5px 5px 5px gray;
-moz-box-shadow: 5px 5px 5px gray;
padding: 10px;
}
</style></head><body><table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>0</td>
</tr></table></body></html>
box-sizing屬性
在css中，使用width屬性與height屬性來指定元素的寬度與高度，但是使用box-sizing屬性，可以指定用width屬性與height屬性分別指定的寬度值與高度值是否包含元素內(nèi)部的補(bǔ)白區(qū)域，以及邊框的寬度與高度。
可以給box-sizing屬性指定的屬性值為content-box屬性值與border-box屬性值。conten-box屬性值表示元素的寬度與高度不包括內(nèi)部補(bǔ)白區(qū)域，以及邊框的寬度與高度，border-box屬性值表示元素的寬度與高度包括內(nèi)部補(bǔ)白區(qū)域，以及邊框的寬度與高度，在沒有使用box-sizing屬性的時(shí)候，默認(rèn)使用content-box屬性值。在樣式代碼中，使用firefox瀏覽器的時(shí)候，需要將其書寫成”-moz-box-sizing”的形式，使用Opera瀏覽器的時(shí)候，需要書寫”box-sizing”的形式，用ie的時(shí)候書寫”-ms-box-sizing”的形式。例子如下：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>box-sizing屬性使用示例</title>
<style>
div {
width: 300px;
border: solid 30px #ffaa00;
padding: 30px;
background-color: #ffff00;
margin: 20px auto;
}
div#div1 {
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-ms-box-sizing: content-box;
}
div#div2{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing:border-box;
}
</style></head><body><div id="div1">
打的阿薩德阿薩德阿薩德撒的撒的撒的啊薩達(dá)阿薩德撒的薩達(dá)阿薩德撒的暗示的撒打算的撒</div><div id="div2">
打的阿薩德阿薩德阿薩德撒的撒的撒的啊薩達(dá)阿薩德撒的薩達(dá)阿薩德撒的暗示的撒打算的撒</div></body></html>
為什么要使用box-sizing屬性
使用box-sizing屬性的目的是控制元素的總寬度，如果不使用該屬性，樣式中默認(rèn)使用的content-box屬性值，它只對(duì)內(nèi)容的寬度做了一個(gè)指定，卻沒有對(duì)元素的總寬度進(jìn)行指定，有些場合下利用border-box屬性值或使得頁面布局更加方便。例子如下：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>確保兩個(gè)div元素的并列顯示</title>
<style>
div{
width:50%;
boder:solid 30px #ffaa00;
padding: 30px;
background-color: #ffff00;
float:left;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing:border-box;
box-sizing: border-box;
}
div#div2{
border:solid 30px #00ffff;
}
</style></head><body><div id="div1">
打的阿薩德阿薩德阿薩德撒的撒的撒的啊薩達(dá)阿薩德撒的薩達(dá)阿薩德撒的暗示的撒打算的撒</div><div id="div2">
打的阿薩德阿薩德阿薩德撒的撒的撒的啊薩達(dá)阿薩德撒的薩達(dá)阿薩德撒的暗示的撒打算的撒</div></body></html>http://www.cnblogs.com/hetaojs/p/7091112.html
延伸閱讀
- 學(xué)習(xí)、實(shí)踐。再學(xué)習(xí)，再實(shí)踐 2023-04-15
- 從0到0.5，堅(jiān)持學(xué)習(xí) 2022-09-08
- 來萬碼學(xué)習(xí)，是我最正確的選擇 2022-09-07
- 學(xué)習(xí)與實(shí)踐 2022-06-24
- 學(xué)習(xí)——工作——再學(xué)習(xí) 2021-06-01
- 不斷學(xué)習(xí)，才能不斷進(jìn)步 2021-05-19
- 此生難忘的一次學(xué)習(xí) 2020-06-11
- 我的學(xué)習(xí)之路 2019-11-24
- 互相學(xué)習(xí)，共同進(jìn)步——?jiǎng)?洵 2019-11-06
- 學(xué)習(xí)過程中，要養(yǎng)成良好的習(xí)慣——穆*杰 2019-07-05
學(xué)習(xí)、實(shí)踐。再學(xué)習(xí)，再實(shí)踐