【【CSS3】background-origin和background-clip的区别】的更多相关文章

css3-background clip 和background origin

1.background-origin background-origin 里面有3个参数 : border-box | padding-box | content-box; border-box,padding-box,content-box从边框,还是内边距(默认值),或者是内容区域开始显示. 代码演示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>…

CSS3详解：background

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

css3 first-of-type选择器以及css3选择器中:first-child与:first-of-type的区别

CSS3 first-of-type选择器 “:first-of-type”选择器类似于“:first-child”选择器,不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素. 示例演示: 通过“:first-of-type”选择器,定位div容器中的第一个p元素(p不一定是容器中的第一个子元素),并设置其背景色为橙色. HTML代码: <div class="wrapper"> <div>我是一个块元素,我是.wrapper的第一…

CSS3中伪类nth-child和nth-of-type区别

本篇文章由:http://xinpure.com/css3-pseudo-class-difference-between-nthchild-and-nthoftype/ 首先来看看 nth-child(n) 和 nth-of-type(n) 的共同点 两者唯一的共同点就是: 参数n的用法 n 可以是数字.关键词或公式(n > 0) nth-child(2) 表示其父元素的第二个子元素 nth-child(2n) 或 nth-child(even) 表示其父元素的第偶数个子元素 nth-chil…

css3单冒号和双冒号的区别

css3中对于伪元素的使用,在项目开发中使用得当将会对代码的可读性又很大的提升.但是对于伪类大家或许都知道是一些选择器的使用,这里总结了关于伪元素中单冒号和双冒号的区别: 再官方定义中规定单冒号都为伪类,是一种选择器 eg:     a:first-child{}     a:nth-of-type(2) {}     a:last-child {}     a:nth-of-type(even) {}     a:nth-of-type(odd) {} 而伪元素的使用中可以用单冒号和双冒号都可…

CSS3伪类与伪元素的区别及注意事项

CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别 定义 首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的 伪类:用于向某些选择器添加特殊的效果 伪元素:用于将特殊的效果添加到某些选择器 讲道理,可能我语文不好,我觉得这两句话是等价的 :-) 根本不能看出有什么区别 都是对某些选择器“加特技” 标准有这么一句话翻译过来是这样的 CSS 引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化 这话更抽象,其实意思就是对那些我们不能通过class.id等选…

css3中的translate,transform,transition的区别

translate:移动,transform的一个方法               通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数:           用法transform: translate(50px, 100px);               -ms-transform: translate(50px,100px);               -webkit-transform: translate(50…

css3中的nth-child和nth-of-type的区别

实例: 首先创建一个HTML结构 <div class="post"> <p>我是文章的第一段落</p> <p>我是文章的第二段落</p> </div> 接下来使用:.nth-child和nth-of-type选择并改变其文字颜色 .post>p:nth-child(2){ color: red; } .post>p:nth-of-type(2){ color: red; } 现在在段落一前面加上一个标…

compass模块

Compass核心模块Reset :重置CSS模块 @import "compass/reset" Layout :页面布局的控制能力 @import "compass/layout" 只有这两个模块是需要明确 指定引入的@import "compass"默认包含了其他五大模块却不包含resrt,layout 其他四个功能模块和Browser support模块CSS3:跨浏览器的CSS3能力Helpers:内含一系列的函数,跟SASS的函数列表…

css2和CSS3的background属性简写

1.css2:background:background-color || url("") || no-repeat || scroll || 0 0;  css3:  background: url("") || 0 0/cover || no-repeat || scroll || border-box || content-box || black; CSS2中的Background属性: background: background-color || bac…