点击上方蓝色字体,关注我 最详细的css3选择器解析 ​ 选择器是什么? 比较官方的解释:在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器. 看代码,元素选择器就是这个: h1作为一个元素标签,是最基本的选择器,这样可以对h1标签设置属性. 选择器有哪些? 常见的选择器:元素选择器,类选择器,ID选择器,属性选择器,派生选择器,本文的思路就是先讲讲最常用的选择器,再讲讲用得比较少的选择器.如果你觉得能学到…

<CSS揭秘>这本书非常不错,充满了干货和惊喜.以下主要是关于使用渐变做出来的一些效果的笔记.请用最新的现代浏览器观看. 首先要回顾下一个css语句: linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+) 这是一个线性渐变,第一参数是渐变方向,是可选的.可以是角度,angle的值是度数,比如45deg,90deg.也可以使用to…

CSS3 2D Transforms Methods translate() rotate() scale() skewX() skewY() matrix() 1> translate() The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis). 2> rotate() The rota…

CSS3 Shadow Effects text-shadow box-shadow 1> text-shadow The text-shadow property adds shadow to text. This property accepts a comma-separated list of shadows to be applied to the text. syntax text-shadow: h-shadow v-shadow blur-radius color|none|in…

CSS3 Gradients Two types of gradients: Linear Gradients (goes down/up/left/right/diagonally) Radial Gradients (defined by their center) Linear Gradients syntax background: linear-gradient(direction, color-stop1, color-stop2, ...); 1> Top to Bottom (t…

CSS3 Rounded Corners The border-radius property is a shorthand property for setting the four border-*-radius properties. syntax border-radius: 1-4 length|% / 1-4 length|%|initial|inherit; Property Description border-radius A shorthand property for se…

CSS/CSS3在线手册:http://www.css119.com/book/css/   CSS3实现水平垂直居中:http://bbs.html5cn.org/thread-87300-1-1.html    http://www.w3cplus.com/css/centering-css-complete-guide.html   CSS魔法:http://www.cssmagic.net/   你很熟悉CSS,却没掌握这些CSS技巧:http://www.html5cn.org/art…

最开始的时候 CSS3产生的一个新属性是一个浏览器的私有的,然后W3C 可能会拿来采用做个标准,再没公布标准之前就只能用私有属性(加前缀)来表达各自厂商的实现,主要是CSS3刚出现那会儿,它暗示该CSS属性或规则尚未成为W3C标准的一部分,尽管现代浏览器已经支持了众多的CSS3属性,但CSS3目前还没得到全面的支持,所以我们需要使用一些特定的声明来提升兼容性,遗憾的是IE8及以下浏览器目前均不支持CSS3.  1.CSS3标准 为加强浏览器兼容性,在使用CSS3属性时尽量使用以下特定声明: * …

CSS3 2D 转换 了解2D变换方法: translate() rotate() scale() skew() matrix() translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动. transform:translate(100px,100px); -ms-transform:translate(10px,100px); /* IE 9 */ -webkit-transform:translate(100px,100px); /* Safari and…

CSS浮动 float:right 伪类: a:link {color:#FF0000;}      /* 未访问链接*/ a:visited {color:#00FF00;}  /* 已访问链接 */ a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */ a:active {color:#0000FF;}  /* 鼠标点击时 */ :first-child:匹配第一个元素 i:first-child:匹lang(no)配第一个x元素的i元素 :lang(no) :f…