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. HDOJ 2209 贪心

    翻纸牌游戏 Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  2. JavaWeb 后端 <十四> 文件上传下载

    1.文件上传与下载 案例: 注册表单/保存商品等相关模块! --à 注册选择头像 / 商品图片 (数据库:存储图片路径 / 图片保存到服务器中指定的目录) 1.1 文件上传 文件上传,要点: 前台: ...

  3. HTML 头标签的 <title> <base> <meta> <link> <script> 的内容意思

    头标签都放在<head></head>头部分之间.包括:title base meta link <title>:指定浏览器的.(标题) <base>: ...

  4. mac版破解office

    下载地址:http://ereach-public.oss-cn-shanghai.aliyuncs.com/office%202016%20for%20mac.dmg 解压密码:www.ifunma ...

  5. Go学习笔记（一）Let's 干吧

    加 Golang学习 QQ群共同学习进步成家立业 ^-^ 群号:96933959 简介     Go是Google开发的一种 静态强类型.编译型,并发型,并具有垃圾回收功能的编程语言.为了方便搜索和识 ...

  6. js获取客户端MAC地址

    最近遇到一个需求,医院要求呼叫中心账号必须对应MAC地址,也就是说该MAC地址必须和呼叫中心账号对应才可使用,这可就难道我了,这需求就要求每次都判断用户登录的电脑MAC地址是否有呼叫中心账号,当然只针 ...

  7. 智联卓聘 卓聘IM(聊聊)开发实践

    1.  卓聘IM开发背景 智联卓聘是智联旗下高端人才招聘平台,成立快4年多,业务增涨每年以100%速度增涨快,同时对产品和研发速度都比较高. 2015年提出IM开发,主要用于后选人与猎头及时交流,降低 ...

  8. 利用base64函数，对文件进行转码加密

    设计此种编码是为了使二进制数据可以通过非纯 8-bit 的传输层传输,例如电子邮件的内容就是通过base64转码后传输的.Base64-encoded后, 数据要比原始数据多占用 33% 左右的空间. ...

  9. 关于springmvc配置validator的注意事项

    <mvc:annotation-driven validator="validator" /> 在使用springmvc整合hibernate-validator做表单 ...

  10. 学习笔记TF026:多层感知机

    隐含层,指除输入.输出层外,的中间层.输入.输出层对外可见.隐含层对外不可见.理论上,只要隐含层节点足够多,只有一个隐含层,神经网络可以拟合任意函数.隐含层越多,越容易拟合复杂函数.拟合复杂函数,所需 ...