CSS3实例教程:background

日期:2021-03-16 类型:科技新闻 

关键词:小程序制作流程,抽奖小程序,微信小程序怎么开店,小程序码生成,小程序模版


原文:http://www.planabc.net/2008/04/14/background-clip_background-origin/
background-clip 和 background-origin 是 CSS3 中新加的 background module 特性,用来明确情况的精准定位。
background-clip 用来分辨 background 是不是包括 border 地区。而 background-origin 用来决策 background-position 测算的参照部位。
英语的语法为: background-clip: [border | padding] [, [border | padding]]* background-origin: [border | padding | content] [, [border | padding | content]]*

针对 background-clip
假如是 padding 值,则 background 忽视 padding边沿,border 是全透明的。假如是 border 值,则background 包含 border 地区。假如 background-image 照片有好几个,对应的 background-clip 值之间用逗号隔开。
针对 background-origin
假如是 padding 值,则 position 相对 padding 边沿("0 0" 为 padding 边沿的左上角,而 "100% 100%" 为右下角)。假如是 border 值,则代表着相对性 border 边沿。而 border 值则相对內容边沿。与 background-clip 同样,好几个值也用逗号隔开。假如 background-clip 是 padding 值,background-origin 是 border 值,而且 background-position 是 "top left"(默认设置原始值),则情况图左上角可能被截取掉一部分。
这两个特性仅从 CSS3 才出現,在未应用该特性 background module 中的默认设置主要表现又怎样呢?
background-clip 默认设置相近于 background-clip:border。
background-origin 默认设置相近于 background-origin:padding。
但 IE 又是特例 (It sucks)。
在 IE6 、IE7 中,1般元素(button 等以外)的情况非常于:background-clip:border; background-origin:border;
而 hasLayout 的元素(再加 button 等)的情况则非常于:background-clip:padding; background-origin:padding;
这1对 CSS3 特性已在 Mozilla, Safari 3 和 Konqueror 等访问器中完成,但是全是根据其独享特性的表述方法。
引入:
基础非 IE 的访问器的独享特性1般都会以 -xxx- 这样刚开始,-o-便是以 Presto 为模块的 Opera 独享的、-icab- 是 iCab 独享的,-khtml- 是以 KHTML 为模块的访问器(如 Konqueror Safari)、-moz- 便是以 Mozilla 的 Gecko 为模块的访问器(如Firefox,Mozilla)、-webkit- 便是以 Webkit 3D渲染模块(是 KHTML 的衍生产制造品)的访问器(如 Safari、Swift)。
即适用的独享特性各自为: moz-background-clip webkit-background-clip khtml-background-clip moz-background-origin webkit-background-origin khtml-background-origin
上1页12 下1页 阅读文章全文
上一篇:门户网网站搭建CSS架构的标准 返回下一篇:没有了