CSS3中包含几个新的背景属性,提供更大的背景元素控制

background-image:

.box{background-image:url();background-position:left bottom;}

background-size:

.box{background-size:100% 100%;}

background-orgin:

.box{background:border-box|content-box|padding-box}

background-clip:

.box{background-clip:content-box|padding-box|border-box;}

时间: 2024-11-05 05:08:44

CSS3中包含几个新的背景属性,提供更大的背景元素控制的相关文章

css3中弹性盒子模型都有那些属性

<div class="father"> <div class="son0"></div> <div class="son2"></div> <div class="son3"></div> </div> 以上面的div结构为例:使用css3中的box的一些属性可以改变框内子元素的宽 高自适应,还可以改变子元素出现的顺序 1.box

css3中新增的一些有用的选择器

css3中新增呢很多新的玩意!有的东西玩着玩着就会被玩坏(呵呵,只是没什么用很鸡助),这来总结下我认为有用的, 不喜勿喷!有错误就请指出!绝对自己总结的,不当伸手党! 属性选择器: div[index]{background:red}    表示div下面带index属性的背景为红色 div[index=a]{background:red}  表示div下面的自定义属性index=a的div的颜色变成红色. div[index~=a]{background:red}    只要div中index

CSS3 背景属性

CSS3 background-size 属性 div {background:url(bg_flower.gif);-moz-background-size:63px 100px; /* 老版本的 Firefox */background-size:63px 100px;background-repeat:no-repeat;} CSS3 background-origin 属性背景图片可以放置于 content-box.padding-box 或 border-box 区域.div{back

CSS3中的变形与动画(二)

CSS3动画 过渡属性transiton-property 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成.但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化,让效果显得更加细腻.简单点说,就是通过鼠标的单击.获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值. 在CSS中创建简单的过渡效果可以从以下几个步骤来实现: 1.在默认样式中声明元素的初始状态样式: 2.声明过渡元素最终状态

HTML5和CSS3中的交互新特性

当文章的标题是一副用photoshop制作的图片,那么势必在搜索引擎中无法搜索到.并且因为图片的体积不算小.可能在网速慢的的时候不得不耐心的等待图片的刷新. 所以.我们来谈谈有没有一种新的方法能够避免这些缺点. 什么是HTML5和CSS3 HTML和CSS并不难理解.HTML为构成网页的主要语言.通过这样的语言.我们能够向计算机说明网页格式.内容.显示效果等等.而CSS则是专门用来控制网页显示效果的语言. HTML 5的新特性 1. 新的内容标签 HTML4中的内容标签级别同样,无法区分各部分内

Html5 与CSS3中的新特性

Html5 绘画 canvas 元素 用于媒介回放的 video 和 audio 元素 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失: sessionStorage 的数据在浏览器关闭后自动删除 语意化更好的内容元素,比如 article.footer.header.nav.section 表单控件,calendar.date.time.email.url.search CSS3 CSS3实现圆角(border-radius),阴影(box-shadow), 对文

认识CSS3中的背景

前端之HTML5,CSS3(七) 背景缩放 CSS3中背景用于手机端需要分系统:ios系统和android系统.对于iso系统,需要背景是2倍宽高像素的背景图,然后背景缩放,如此在ios系统中打开才会不导致图片失真.简单来说,就是ios系统自带背景放大功能,当设置背景为原图大小时,ios系统打开会对背景图片进行2倍放大,然而一般像素放大会产生失真效果,即模糊效果.因此,需要对背景先缩小,再通过ios系统打开,即为原图大小. background-size属性 通过background-size属

CSS3中新的单位&quot;rem&quot;的坑

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> html:root{font-size:62.5%;} body{font-size:.16rem;padding:

css3中的部分属性

1.阴影box-shadow:x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式] 注意:inset(内阴影) 可以写在参数的第一个或最后一个,其它位置是无效的实例 正值表示在对象的底部,负值表示在对象的顶部. .boxshadow-outset{ width:100px; height:100px; box-shadow:4px 4px 6px blue,4px 4px 6px red inset; } .boxshadow-inset{ width:100p