background-image绘制多张图片叠加，示例如下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>background-image绘制多张图片叠加</title>

    <style>

        div{

            width:1100px;

            height:800px;

            background-image: url("../../image/icon1.jpg"),url("../../image/border3.jpg");

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

            background-position:100%,100%,center,center;

            border:5px solid #ff0000;

        }

    </style>

</head>

<body>

<div></div>

</body>

</html>
background-clip:规定背景的绘制区域：
background-origin:相对于内容框来定位背景图像:
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>background-clip及background-origin属性</title>

    <style>

        /*background-clip:规定背景的绘制区域：*/

        /*background-origin:相对于内容框来定位背景图像：*/

        div{

            background: #fff000;

            font-size: 30px;

            border:10px dashed #0000ff;

            padding:20px;

            background-image: url("../../image/icon.png");

            background-repeat:no-repeat;

        }

        .div2{

            margin-top:30px;

            background-origin: content-box;

            background-clip: content-box;

        }

        .div3{

            margin-top:30px;

            background-origin: border-box;

            background-clip: border-box;

        }

        .div4{

            margin-top:30px;

            background-origin: padding-box;

            background-clip: padding-box;

        }

    </style>

</head>

<body>

<div>这是一段测试文字</div>

<div class="div2">这是一段测试文字</div>

<div class="div3">这是一段测试文字</div>

<div class="div4">这是一段测试文字</div>

</body>

</html>

css3的box-shadow属性:

让ie6、7、8都支持border-radius 、box-shadow、text-shadow的方法:用ie-css3.htc

首先下载ie-css3.htc脚本，然后在css中加入：

它的使用方法是：下载它并放到你的服务器目录

在你的<head></head>里面写入下面的代码:

.box{

-moz-box-shadow: 10px 10px 20px #000; /* Firefox */

-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */

box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */

behavior: url(ie-css3.htc);

}

注意：behavior: url(ie-css3.htc) 中的ie-css3.htc地址用绝对路径或者直接传到网站的根目录下面，要不然可能会看不到效果。

•当你使用了这个htc文件后，你的CSS里面，只要写有box-shadow, -moz-box-shadow或-webkit-box-shadow的任何一种，IE就会渲染。
•当使用了这个htc文件后，你不能这样写box-shadow: 0 0 10px red; 而应该是box-shadow: 0px 0px 10px
red; 否则IE中会失效。
•不支持RGBA值中的alpha透明度。
•不支持inset内阴影。
•不支持阴影扩展。

•阴影在IE中只会显示为黑色，不管你设置成其它什么颜色。
但是，这个脚本了仅仅是让IE支持了部份的box-shadow值。

CSS3背景相关样式的更多相关文章

  1. CSS/CSS3常用样式小结

    1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...

  2. [总结]CSS/CSS3常用样式与web移动端资源

    CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...

  3. 炫酷的CSS3抖动样式:CSS Shake

    CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像): 炫酷的CSS3抖动样式:CSS Shake 这是一个很微小的动画 ...

  4. css3-4 css3边框样式

    css3-4 css3边框样式 一.总结 一句话总结: 二.css3边框样式 1.相关知识 边框属性:1.border-width2.border-style3.border-color 边框方位:1 ...

  5. css3-3 css3背景样式

    css3-3 css3背景样式 一.总结 一句话总结:网站页面上的小图标集成在一张大图上面,是因为降低服务器负载,网站上的那些图片都可以下载下来,源码那里,或者工具那里. 1.background:# ...

  6. CSS3学习系列之背景相关样式（一）

    新增属性: background-clip:指定背景的显示范围 background-origin:指定绘制背景图像时的起点 background-size:指定背景中图像的尺寸 background ...

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

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

  8. 一些上流的CSS3图片样式

    直接在图片元素上直接应用CSS3 inset box-shadow 或 border-radius时,浏览器并不能完美的渲染它们.不过,如果把这个图片用作背景图,你就可以可以给它添加任何样式了,浏览器 ...

  9. css3常用样式集锦

    控制线显示0.5px .line:after{ content:""; display:block; position:absolute; width:200%; left:0; ...

随机推荐

  1. javascript 玩转Date对象

    前言:最近在做一个日期选择功能,在日期转换的时候经常换到晕,总结一下常用的Date对象的相关用法,方便日后直接查看使用- 1. new Date()的使用方法有: 不接收任何参数:返回当前时间: 接收 ...

  2. 【Python3之多线程】

    一.threading模块 multiprocess模块的完全模仿了threading模块的接口,二者在使用层面,有很大的相似性. 1.开启线程的两种方式(同Process) 方法一 from thr ...

  3. Python-Flask：利用flask_sqlalchemy实现分页效果

    Flask-sqlalchemy是关于flask一个针对数据库管理的.文中我们采用一个关于员工显示例子. 首先,我们创建SQLALCHEMY对像db. from flask import Flask, ...

  4. Android系统--输入系统（十五）实战_使用GlobalKey一键启动程序

    Android系统--输入系统(十五)实战_使用GlobalKey一键启动程序 1. 一键启动的过程 1.1 对于global key, 系统会根据global_keys.xml发送消息给某个组件 & ...

  5. HDU 3829 Cat VS Dog / NBUT 1305 Cat VS Dog（二分图最大匹配）

    HDU 3829 Cat VS Dog / NBUT 1305 Cat VS Dog(二分图最大匹配) Description The zoo have N cats and M dogs, toda ...

  6. MySQL oracle 分页

    (1)MySql的Limit m,n语句 Limit后的两个参数中,参数m是起始下标,它从0开始:参数n是返回的记录数.我们需要分页的话指定这两个值即可. 比如:查询10行记录,起始行从3开始 SEL ...

  7. python cookbook第三版学习笔记十二：类和对象(三)创建新的类或实例属性

    先介绍几个类中的应用__getattr__,__setattr__,__get__,__set__,__getattribute__,. __getattr__:当在类中找不到attribute的时候 ...

  8. redis分布式锁和消息队列

    最近博主在看redis的时候发现了两种redis使用方式,与之前redis作为缓存不同,利用的是redis可设置key的有效时间和redis的BRPOP命令. 分布式锁 由于目前一些编程语言,如PHP ...

  9. [luogu P3786]萃香抱西瓜 [spfa][状态压缩]

    题目背景 伊吹萃香(Ibuki Suika)正在魔法之森漫步,突然,许多西瓜(Suika)从四周飞来,划出了绚丽的轨迹.虽然阵势有点恐怖,但她还是决定抱走一些西瓜. 题目描述 萃香所处的环境被简化为一 ...

  10. （转）linux常用查看硬件设备信息命令

    场景:在一篇博客中看到这些总结性命令,感觉很实用就转载,以后用到进行相关的整理 系统 # uname -a # 查看内核/操作系统/CPU信息 # lsb_release -a # 查看操作系统版本 ...