css3的新属性background-clip认识

css3新增的background-clip属性主要是对背景图片进行裁切的作用:background-clip:border-box || padding-box || context-box

分别对边框,内边距,内容区域进行裁切,把多余的部分给裁切掉,有兼容性问题.

拿w3cplus的文章代码过来:

/*Firefox3.6-*/   -moz-background-clip: border || padding;   

/*Webkit*/   -webkit-background-clip: border-box || padding-box || context-box;   

/*W3C标准 IE9+ and Firefox4.0+*/   background-clip: border-box || padding-box || context-box;

例子可以看:http://www.w3cplus.com/content/css3-background-clip

css3的新属性background-clip认识

时间： 2024-10-10 08:09:16

css3的新属性background-clip认识的相关文章

小K的H5之旅-HTML5与CSS3部分新属性浅见

一.HTML部分 1.HTML5新特点向下兼容.用户至上.化繁为简.无插件范式.访问通用性.引入语义.引入原生媒体支持.引入可编程内容 2.HTML5标签语法可以省略的元素:空元素语法的元素{br} ;可以省略结束标签的元素 {p,li,h}:可以全部省略标签的元素 {html,head,body} >>>尽量不用!! 具有boolean值的属性:属性名=属性值 >>> 可以只写属性名属性值的引号可省略:具有多个属性值的不能省 3.HTML新增结构标签(变形的

css3的新属性

1.css的标准阴影 li:nth-child(1) shadow{ box-shadow :2px 2px 5px green; ------------------------ 距离左边距离顶边模糊度阴影颜色---------- -2px -2px 5px 10px green: ---------------------------距离右边距离底边模糊

css3 的新属性

1,动画,animate------>//动画-名称-动画的时间间隔-以什么方式播放-循环 .right{ animate:dropdown 8s linear infinite } @keyframes dropdown{ 0%{margin-top:10px;} 10%{margin-top:20px;} 100%{margin-top:50px;} } 2. transition: width 2s linear;//过度的效果线性-宽度2s-发生变化 3.transform:rotat

CSS3新属性注释及实例

这里把CSS3的新属性单独拿出来讲解一下: border-radius 属性用于创建圆角div{border:2px solid;border-radius:25px;-moz-border-radius:25px; /* Old Firefox */}border-shadow 用于向方框添加阴影div{width:300px;height:100px;background-color:#ff9900;-moz-box-shadow: 10px 10px 5px #888888; /* 老的

CSS3详解：background

CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片在css3里面,你可以再一个标签元素里应用多个背景图片.代码类似与css2.0版本的写法,但引用图片之间需用“,”逗号隔开.第一个图片是定位在元素最上面的背景,后面的背景图片依次在它下面显示,如下: background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-i

CSS背景属性Background详解

本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. css2 中的背景(background) CSS2 中有5个主要的背景(background)属性,它们是: background-color: 指定填充背景的颜色. background-image: 引用图片作为背景. background-position: 指定元素背景图片的位置. background-repeat: 决定是否

css3 的box-sizing属性理解

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 有时候在某些项目中会发现这些css.box-sizing究竟有什么用还得重头说起... 我们一般计算一个块状元素的宽度的时候会将左右padding,左右border宽度,margin 都算进去,如下图所示(浏览器默认计算方式),宽度不是100px,而是160px: style="width:100px;padding

css3的Background新属性

前言 CSS3中出现了几种关于背景图片的新属性:background-origin.background-clip.background-position等.之前大致了解了下,但是background-origin与background-clip的区别尚不清楚.就google了一篇,发现不错,翻译下来吧. 原文连接 : The New Background Position in CSS3 Say Hello to Background-Origin and Background-Clip, C

两点补充——CSS3新属性以及弹性布局

CSS3 新属性一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋二 .[CSS 长度单位] 1.px:像素.长度固定,表示分辨率占几个像素点: 2.%:表示相对于默认值的百分比: 3.em:长度与元素的字号挂钩. rem:长度与根元素的字号挂钩. 即与html 的 font-size 挂钩,若不设置,默认16px . [ em与rem区别 ] em与当前元素自身的font-size挂钩