当通过把 overflow 属性的属性值设定为 "hidden" 的方法,将盒中容纳不下的内容隐藏起来时,如果使用 text-overflow 属性,可以在盒的末尾显示一个代表省略号 "…"。但是,text-overflow 属性只在当盒中的内容在水平方向上超出盒的容纳范围时有效。例子如下:
- <!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>
- 炸弹阿萨德阿萨德 沙雕暗示的萨达萨达阿萨德
- </div>
- </body>
- </html>
在 CSS3 中,可以使用 box-shadow 属性让盒在显示时产生阴影效果。写法如下:
- box-shadow:length length length color
其中,前面三个 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>
可以单独对盒内的子元素使用阴影,例子如下:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 对盒内子元素使用阴影的示例
- </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>
- 按时大大阿萨德阿萨德萨达
- <span>
- 阿萨德阿萨德萨达阿萨德阿萨德
- </span>
- 按时大大阿萨德阿萨德萨达
- <span>
- 阿萨德阿萨德萨达阿萨德阿萨德
- </span>
- </div>
- </body>
- </html>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>对第一个文字使用阴影的示例</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>
可以使用 box-shadow 属性让表格及表格内的单元格产生阴影效果。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 使用box-shadow属性让表格及单元格产生阴影效果的示例
- </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>
在 css 中,使用 width 属性与 height 属性来指定元素的宽度与高度,但是使用 box-sizing 属性,可以指定用 width 属性与 height 属性分别指定的宽度值与高度值是否包含元素内部的补白区域,以及边框的宽度与高度。
可以给 box-sizing 属性指定的属性值为 content-box 属性值与 border-box 属性值。conten-box 属性值表示元素的宽度与高度不包括内部补白区域,以及边框的宽度与高度,border-box 属性值表示元素的宽度与高度包括内部补白区域,以及边框的宽度与高度,在没有使用 box-sizing 属性的时候,默认使用 content-box 属性值。在样式代码中,使用 firefox 浏览器的时候,需要将其书写成 "-moz-box-sizing" 的形式,使用 Opera 浏览器的时候,需要书写 "box-sizing" 的形式,用 ie 的时候书写 "-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">
- 打的阿萨德阿萨德阿萨德撒的撒的撒的啊萨达阿萨德撒的萨达阿萨德撒的暗示的撒打算的撒
- </div>
- <div id="div2">
- 打的阿萨德阿萨德阿萨德撒的撒的撒的啊萨达阿萨德撒的萨达阿萨德撒的暗示的撒打算的撒
- </div>
- </body>
- </html>
使用 box-sizing 属性的目的是控制元素的总宽度,如果不使用该属性,样式中默认使用的 content-box 属性值,它只对内容的宽度做了一个指定,却没有对元素的总宽度进行指定,有些场合下利用 border-box 属性值或使得页面布局更加方便。例子如下:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>确保两个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">
- 打的阿萨德阿萨德阿萨德撒的撒的撒的啊萨达阿萨德撒的萨达阿萨德撒的暗示的撒打算的撒
- </div>
- <div id="div2">
- 打的阿萨德阿萨德阿萨德撒的撒的撒的啊萨达阿萨德撒的萨达阿萨德撒的暗示的撒打算的撒
- </div>
- </body>
- </html>
来源: http://www.cnblogs.com/hetaojs/p/7091112.html