• 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学习系列之盒样式（二）的更多相关文章

  1. CSS3学习系列之盒样式（一）

    盒的基本类型 在css中,使用display属性来定义盒的类型,总体上来说,css中的盒分为block类型与inline类型 inline-block类型 inline-block类型是在css2.1 ...

  2. CSS3学习系列之布局样式（二）

    使用盒布局 在CSS3中,通过box属性来使用盒布局,例子如下: <!DOCTYPE html> <html lang="en"> <head> ...

  3. CSS3学习系列之背景相关样式（二）

    在border-radius属性中指定两个半径 在border-radius属性中,可以指定两个半径,指定方法如下所示: border-radius:40px 20px; 针对这种情况,各种浏览器的处 ...

  4. CSS3学习系列之选择器（二）

    first-child选择器和last-child选择器 first-child指定第一个元素.last-child指定最后一个子元素. 例如: <!DOCTYPE html> <h ...

  5. CSS3学习系列之背景相关样式（一）

    新增属性: background-clip:指定背景的显示范围 background-origin:指定绘制背景图像时的起点 background-size:指定背景中图像的尺寸 background ...

  6. CSS3学习系列之布局样式（一）

    多栏布局 使用float属性或position属性的缺点: 使用float属性或position属性进行页面中的简单布局的例子. <!DOCTYPE html> <html lang ...

  7. [CSS3]学习笔记-CSS基本样式讲解

    1.CSS样式-背景 CSS运行应用纯色作背景,也允许使用背景图像创建相当复杂的效果 <!DOCTYPE html> <html> <head lang="en ...

  8. css3学习系列之选择器（一）

    CSS3中的属性选择器 [att*=val]属性选择器:[att*=val]属性选择器的含义是:如果元素att表示的属性之属性值中包含用val指定的字符的话,则该元素使用这个样式. [att^=val ...

  9. CSS3学习系列之选择器（四）

    使用选择器来插入文字 css2中,使用before选择器在元素前面插入内容,使用after选择器在元素后面插入内容,在选择器的content属性中定义要插入的内容.将content属性值设定为none ...

随机推荐

  1. JS中作用域

    var scope = 'global'; var f = function() { console.log(scope); // 输出 undefined var scope = 'f'; } f( ...

  2. UI—视图的生命周期

  3. 使用CSS和JQuery实现表格单元格内容超出时部分隐藏，隐藏部分以...显示

    1.使用CSS实现,给此单元格添加一个Class: width:130px; display:block; overflow:hidden; word-break:keep-all; white-sp ...

  4. Alsa 读取wave文件，并播放wave 文件

    对于一个wave文件,如果需要播放,涉及到几个方面 1.对于wave文件的解析 2.通过解析wave文件,将得到的参数(主要是sampfrequency, bitsperSample,channel) ...

  5. 关于java和c++中的i++

    看到一个题目,大概是i=i++之类. 乍一看很简单,都知道i++的先参与计算再自增, 所以i不变. 但是仔细一想, 如果i不变, 那么在赋值之后, 自增的i, 增加的是谁呢? 逻辑顺序是怎样的呢? / ...

  6. Java IO详解（一)------File 类

    File 类:文件和目录路径名的抽象表示. 注意:File 类只能操作文件的属性,文件的内容是不能操作的. 1.File 类的字段 我们知道,各个平台之间的路径分隔符是不一样的. ①.对于UNIX平台 ...

  7. python 之变量

    什么是变量? 变量就是存储一个不固定的值,可以随时更改其值. 1.变量不仅可以是数字,还可以是任意数据类型 2.变量名必须是大小写英文.数字和_的组合,且不能用数字开头 python变量如何存储 首先 ...

  8. 使用xftp将文件上传至云服务器

    一.在云服务器配置FTP服务:    1.在root权限下,通过如下命令安装Vsftp(以centos 系统为例): yum install -y vsftpd.    2. 在启动vsftpd服务之 ...

  9. JSP----获取表单参数

    在页面中可大量使用 request 对象来获取表单域的值,获取表单域的值有如下两个 方法. • String getParamete(String para mN ame): 获取表单域的值. • S ...

  10. linux开发常用命令

    最近经常查看服务器上的log文件,有时log文件太大查起来很不方便,看了看网上说可以部分查询,就先记录一下吧 Linux中查看部分文件内容命令head,tail,sed的用法: Linux中的查看文件 ...