• 新增属性：

background-clip:指定背景的显示范围

background-origin：指定绘制背景图像时的起点

background-size：指定背景中图像的尺寸

background-break：指定内联元素的背景图像进行平铺时的循环方式

  • background-clip属性

在HTML页面中，一个具有背景的元素通常由元素的内容、内容补白（padding）、边框、外部补白（margin）构成。

元素背景的显示范围在css2与css2.1、css3中的并不相同，在css2中，背景的显示范围是指内部补白之内的范围，不包括边框；而在css2.1至css3中，背景的显示范围是指包括边框在内的范围，在css3中，可以使用background-clip来修改背景的显示范围，如果将background-clip的属性值设定为border，则背景范围包括边框区域，如果设定为padding则不包括边框区域。例子如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>两种background-clip属性值的对比示例</title>

    <style>

        div {

            background-color: black;

            border: dashed 15px green;

            padding: 30px;

            color: white;

            font-size: 30px;

            font-weight: bold;

            margin: 50px 0;

        }

        div.div1 {

            -moz-background-clip: border;

            -webkit-background-clip: border;

            background-clip: border;

        }

        div.div2 {

            -moz-background-clip: padding;

            -webkit-background-clip: padding;

            background-clip: padding;

        }

    </style>

</head>

<body>

<div id="div1">

    示例

</div>

<div id="div2">

    示例里

</div>

</body>

</html>

（有出入）

  • background-origin属性

在绘制背景图像时，默认是从内部补白（padding）区域的左上角开始，但是可以利用background-origin属性来指定绘制时从边框的左上角开始，或者从内容的左上角开始。

例子如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>background-origin属性使用示例</title>

    <style>

        div {

            background-color: black;

            border: dashed 15px green;

            padding: 30px;

            color: white;;

            font-size: 2em;

            font-weight: bold;

        }

        div.div1 {

            -moz-background-origin: border;

            -webkit-background-origin: border;

            background-origin: border-box;

        }

        div.div2 {

            -moz-background-origin: padding;

            -webkit-background-origin: padding;

            background-origin: padding-box;

        }

        div.div3 {

            -moz-background-origin: content;

            -webkit-background-origin: content;

            background-origin: content-box;

        }

    </style>

</head>

<body>

<div id="div1">

    示例

</div>

<div id="div2">

    示例里

</div>

<div id="div3">

    示例里示例里

</div>

</body>

</html>
  • background-size属性

在css3中，可以使用background-size属性来指定背景图像的尺寸，例子如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>background-size属性的使用示例</title>

    <style>

      div{

          background-color: black;

          background-image: url(flower-red.png);

          padding:30px;

          color:white;

          font-size:2em;

          font-weight: bold;

          background-size: 40px 20px;

          -webkit-background-size: 40px 20px;

      }

    </style>

</head>

<body>

<div>

    示例

</div>

</body>

</html>
  • background-break属性

将background-break属性指定为bounding-box的时候，背景图像在整个内联元素中进行平铺，指定为each-box的时候，背景图像在每一行中进行平铺，指定为continuous的时候，下一行中的图像紧接着上一行中的图像继续平铺，例子如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>background-break属性的使用示例</title>

    <style>

      span{

          background-color: #888888;

          background-image: url(flower-green.png);

          padding: 0.2em;

          color:gray;

          line-height: 1.5;

          font-size: 1em;

          font-weight: bold;

      }

        div.div1 span{

            -moz-background-inline-policy:bouding-box;

        }

      div.div2 span{

          -moz-background-inline-policy:each-box;

      }

      div.div3 span{

          -moz-background-inline-policy:continuous;

      }

    </style>

</head>

<body>

<div class="div1">

    示例

</div>

<div class="div2">

    示例

</div>

<div class="div3">

    示例

</div>

</body>

</html>
  • 在一个元素中显示多个背景图像
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>在一个元素中显示多个背景图像的示例</title>

    <style>

     div{

         background-image: url(flower-red.png),url(flower-green.png),url(sky.jpg);

         background-repeat: no-repeat,repeat-x,no-repeat;

         background-position: 3% 98%, 85%,conter conter,top;

         width:300px;

         padding: 90px 0px;

     }

    </style>

</head>

<body>

<div></div>

</body>

</html>
  • border-radius属性

在css3中，只要使用border-radius属性指定好圆角的半径，就可以绘制圆角边框了。例子如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>绘制圆角边框示例</title>

    <style>

    div{

        border:solid 5px blue;

        border-radius:20px;

        -moz-border-radius: 20px;

        -o-border-radius:20px;

        -webkit-border-radius: 20px;

        background-color: skyblue;

        padding: 20px;

        width: 180px;

    }

    </style>

</head>

<body>

<div>文字问文字问文字问文字问文字问文字问文字问</div>

</body>

</html>

CSS3学习系列之背景相关样式（一）的更多相关文章

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

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

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

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

  3. CSS3学习系列之盒样式（二）

    text-overflow属性 当通过把overflow属性的属性值设定为"hidden"的方法,将盒中容纳不下的内容隐藏起来时,如果使用text-overflow属性,可以在盒的 ...

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. 漫话JavaScript与异步·第二话——Promise：一诺千金

    一.难以掌控的回调 我在第一话中介绍了异步的概念.事件循环.以及JS编程中可能的3种异步情况(用户交互.I/O.定时器).在编写异步操作代码时,最直接.也是每个JSer最先接触的写法一定是回调函数(c ...

  2. [笔记]ACM笔记 - 自用模板

    长期更新. 快速幂 lld pow_mod(lld a, lld b, const int &pr) { lld ans = 1; while (b) { if (b & 1) ans ...

  3. Java集合框架类

    java集合框架类图 Collection接口(List.Set.Queue.Stack):

  4. angular.js封装的树形指令

    html ul.tree-show sub-transclude-set ng-transclude li.parent(ng-repeat='(key,item) in treeData',ng-i ...

  5. 服务器返回webview字符串，用该字符串填满整个屏幕，不可缩放

    数据源 String webview_str: <p><img src="http://img.tianxiahuo.cn/goods/20160114/uploads/i ...

  6. 关于ie的h5 刷新和ctrl+5刷新 以及图标刷新的问题

    最近在做一个表单验证,当表单失去焦点的时候触发错误提示. 可是..... 火狐 欧朋 刷新都没有问题,而在ie edge 用f5刷新的时候 都能记住之前的焦点 造成提示混乱. 问题算是解决: < ...

  7. Git分支合并选择

    用Git进行多人协作开发时,必然会合并代码,解决冲突.然而合并代码也是需要点技巧的,如果对一些关键命令没有理解去使用的话,git的版本演进路线就会变得很乱,从而造成了日后维护的一些麻烦. Git上合并 ...

  8. PHP. 01. C/S架构、B/S架构、服务器类型、服务器软件、HTTP协议／服务器、数据库、服务器web开发、PHP简介／常见语法、PHPheader（）、 PHP_POST/GET数据获取和错误处理

    C/S架构 Client/Server 指客户端,服务器 架构的意思 优点:性能性高:可将一部分的计算工作放在客户端上,服务器只需处理出局即可   洁面炫酷,可使用更多系统提供的效果 缺点:更新软件需 ...

  9. Error:No such property: GROUP for class: org.gradle.api.publication.maven.internal.deployer.DefaultGroovyMavenDeployer

    注:参考:http://stackoverflow.com/questions/28450549/errorno-such-property-group-for-class-org-gradle-ap ...

  10. 小tips：用java模拟小球做抛物线运动

    这几天刚刚学习了java线程,然后跟着书做了几个关于线程的练习,其中有一个练习题是小球动起来.这个相信很简单,只要运用线程就轻松能够实现.然后看到了它的一个课后思考题,怎样让小球做个抛物线运动,这点我 ...