首页 > 代码库 > CSS3学习系列之盒样式（二）

CSS3学习系列之盒样式（二）

2024-10-13 10:20:39   217人阅读

  • text-overflow属性

当通过把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>
  • box-shadow属性的使用方法

在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>
  • box-sizing属性

在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属性

使用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>

CSS3学习系列之盒样式（二）


联系
我们