• 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. Object-C iOS纯代码布局 一堆代码可以放这里！

    前言: 最近写的文章都是创业类,好吧,今天好好写写技术类的文章! 不过分享的不是IOS相关的文章,毕竟这几天在速成IOS,看的是object-c,由于速成的很快,好累! 好在现在基本已经入了点门道了, ...

  2. 基本排序算法<一>

    一 选择排序 原理:选择排序很简单,他的步骤如下: 从左至右遍历,找到最小(大)的元素,然后与第一个元素交换. 从剩余未排序元素中继续寻找最小(大)元素,然后与第二个元素进行交换. 以此类推,直到所有 ...

  3. jQuery选择器的的优点

    jQuery选择器的的优点 选择器想必大家都不陌生,今天呢,我就给大家介绍一下jQuery选择器的优点: jQuery选择器更简洁的写法: jQuery完善的处理机制: jQuery选择器判断dom节 ...

  4. 分布式服务：Dubbo+Zookeeper+Proxy+Restful 分布式架构

    分布式 分布式服务:Dubbo+Zookeeper+Proxy+Restful 分布式消息中间件:KafKa+Flume+Zookeeper 分布式缓存:Redis    分布式文件:FastDFS ...

  5. struts2.5能不能再恶心点

    Caused by: java.lang.IllegalArgumentException: unknown reserved key '_typeConverter' at ognl.OgnlCon ...

  6. MSSQL-Scripter，一个新的生成T-SQL脚本的SQL Server命令行工具

    这里向大家介绍一个新的生成T-SQL脚本的SQL Server命令行工具:mssql-scripter.它支持在SQL Server.Azure SQL DB以及Azure SQL DW中为数据库生成 ...

  7. mac上解决Resource temporarily unavailable

    Resource temporarily unavailable这种问题一般是因为当前的进程数或者文件数不够 fork: Resource temporarily unavailable 修改最大进程 ...

  8. python 计算两个日期相差多少个月

    近期,由于业务需要计算两个日期之前相差多少个月.我在网上找了很久,结果发现万能的python,居然没有一个模块计算两个日期的月数,像Java.C#之类的高级语言,都会有(date1-date2).mo ...

  9. 10.Java 加解密技术系列之 DH

    Java 加解密技术系列之 DH 序 概念 原理 代码实现 结果 结束语 序 上一篇文章中简单的介绍了一种非对称加密算法 — — RSA,今天这篇文章,继续介绍另一种非对称加密算法 — — DH.当然 ...

  10. Cannot be cast to java.lang.Comparable异常

    Set集合中的treeSet问题:cannot be cast to java.lang.Comparable: 原理: Set不保存重复的元素,与Collection类似,只是行为不同,Set是基于 ...