• 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-----论数据类型检测

    常见的数据类型检测的方法: 一.最为基础的typeof 二.不可不知的instanceof 三.比instanceof更好的constructor 四.检测值或者表达式的结果是否为NaN 五.易用的j ...

  2. 学习笔记：javascript 文档对象（document）

    1.documnet函数 方法 描述 close() 关闭用 document.open() 方法打开的输出流,并显示选定的数据. getElementById() 返回对拥有指定 id 的第一个对象 ...

  3. BM算法详解

    http://www-igm.univ-mlv.fr/~lecroq/string/node14.html http://www.cs.utexas.edu/users/moore/publicati ...

  4. jQuery操作css样式

    jQuery操作css样式 css操作的分类: css操作 位置操作 尺寸操作 css操作之css css代码: html代码: jQuery代码: 效果如下: css操作之位置操作 css代码: h ...

  5. AJAX的简单梳理

    一.Ajax的简介 Ajax,异步JavaScript和XML,异步提交,无刷新技术,局部刷新技术 1)传统的客户端与服务器端交互的模式 客户端发送请求直接给服务端,服务接受到请求后进行逻辑运算,最终 ...

  6. 通过vmware 启动cloudera-quickstart-vm-5.10.0-0-vmware.zip镜像无法启动。

    解压cloudera-quickstart-vm-5.10.0-0-vmware.zip中找到cloudera-quickstart-vm-5.10.0-0-vmware.vmx文件打开注释点#msg ...

  7. python之配置logging的几种方式

    作为开发者,我们可以通过以下3中方式来配置logging: 1)使用Python代码显式的创建loggers, handlers和formatters并分别调用它们的配置函数: 2)创建一个日志配置文 ...

  8. HttpGet和HttpPost

    package net.blogjava.mobile; import java.net.HttpURLConnection; import java.util.ArrayList; import j ...

  9. 解决selenium驱动Firefox跳转页慢慢慢的问题

    首先我给自己定义为是一个更新偏执狂.不知道从哪个版本开始,使用selenium驱动打开Firefox浏览器时,会跳转到官网指定页,这个过程真是慢得要死. 为了解决这个问题,我是查了很多资料,解决方案是 ...

  10. Principal Components Regression, Pt.1: The Standard Method

    In this note, we discuss principal components regression and some of the issues with it: The need fo ...