• 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实现鼠标悬浮,显示内容

    其实就是增加title属性

  2. zoj1654 Place the Robots 二分图最大匹配

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=654 将每一行的包含空地的区域编号 再将每一列的包含空地的区域编号 然 ...

  3. [刷题]算法竞赛入门经典(第2版) 6-1/UVa673 6-2/UVa712 6-3/UVa536

    这三题比较简单,只放代码了. 题目:6-1 UVa673 - Parentheses Balance //UVa673 - Parentheses Balance //Accepted 0.000s ...

  4. 头皮发麻的HTML课时一

    话说我都不知道有多少天没有更新我的随笔了,不过我忽的一下发现到灵魂深处的罪孽:好吧,不扯淡了,其实就是自己懒得外加上HTML这个东西又实在是很重要,所以良心发现把我自己所学的给记录下来,我会尽量的写的 ...

  5. rsyslog管理分布式日志

    [TOC] 背景 有一个4台机器的分布式服务,不多不少,上每台机器上查看日志比较麻烦,用Flume,Logstash.ElasticSearch.Kibana等分布式日志管理系统又显得大材小用,所以想 ...

  6. SpringMVC中使用@Value给非String类型注入值

    String类型的@Value注入方式 String类型的直接可以使用 @Value("陈婉清") private String name; 非String类型的@Value注入方 ...

  7. Python下划线的使用

    References: [1]. http://python.jobbole.com/81129/ 本文将讨论Python中下划线(_)字符的使用方法.我们将会看到,正如Python中的很多事情,下划 ...

  8. 根据wsdl文件用soapUi快速创建webService服务(有图有真相)

    最近公司业务上使用webservice 频繁.由于之前都是自己搭建webservice 自己定义提供给别人服务,现在则相反需求都是根据人家提供的wsdl 文件来生成 我们平台需要提供的接口.刚开始不知 ...

  9. javaWeb学习总结（3）- Servlet总结(servlet的主要接口、类)

    Servlet总结01——servlet的主要接口.类 (一)servlet类 Servlet主要类.接口的结构如下图所示: 要编写一个Servlet需要实现javax.servlet.Servlet ...

  10. YII缓存依赖的应用

    YII缓存依赖的应用 缓存 缓存依赖 Yii 缓存是提升Web应用性能的简便有效的方式.当我们在加载网页需要过多的时间,比如说查询时间过久,抑或是调用接口占用过多I/O,建立缓存是一个行之有效的方法, ...