• 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. [原创]Jquery实现表格内容点击隐藏显示内容

    1.首先看效果,点击红色字体,可是查看全部文字内容 2.JS实现 思路:将Ajax获得的数据,一份截取,一份不变,放到td里面,分别用span装着. 然后通过display属性,进行切换

  2. 如何设置自适应当前浏览器高度的div块

    嗯 就是下面这样 <!DOCTYPE html> <head> <title>adaptive this page size</title> <s ...

  3. 热切换Log4j级别配置

    欢迎和大家交流技术相关问题:邮箱: jiangxinnju@163.com博客园地址: http://www.cnblogs.com/jiangxinnjuGitHub地址: https://gith ...

  4. jQuery 一个你意想不到的代码神器！

    jQuery 一个你意想不到的代码神器! jQuery 选择器.(最简单,最基本) jquery选择器的优势: (1) 简洁的写法,$()函数 (2)支持CSS1到CSS3选择器 (3)完善的处理机制 ...

  5. 转：Java compiler level does not match the version of the installed Java project facet

    a.问题描述:eclipse加载新的项目后报一个错误,具体描述如下: Description Resource PathLocation Type Java compiler level does n ...

  6. 域名系统DNS和FTP

    域名系统概述 域名系统DNS(Domain Name System)是英特网使用的命名系统,用于把便于人们使用机器名字转化为IP地址. 为什么机器在处理IP数据报时要使用IP地址而不使用域名呢?IP地 ...

  7. web基础之会话技术

    一.会话技术之Cookie Cookie技术是将数据存储到客户端 1．怎样去向客户端写出一个cookie 1)创建Cookie对象 Cookie cookie = new Cookie(name,va ...

  8. thinkphp中的钩子_什么是钩子？

    讲到插件,不得不讲钩子.首先,我们之前说明了插件是一个扩展的功能实现. 既然是扩展的,那么就要很灵活.可复用,并不是像我们之前开发项目,一个功能实现了,就写死在代码里了. 项目其他地方要用了,怎么办, ...

  9. Day4-生成器generator

    列表生成式 需求:列表[0,1,2,3,4,5,6,7,8,9]每个值加1,如何实现? 方法1:列表追加 >>> a = [0,1,2,3,4,5,6,7,8,9] >> ...

  10. 用app.net Core搞点多国语言网站

    Asp.net Core 中文文档很少,你可以看英文的,不过英文的也是说的有点乱.这篇文章是干货. 1. 配置好你的WebApplication,使他可以支持国际化语言,修改文档Startup.cs ...