【利用css3选择器及css3边框做出的特效(1)】的更多相关文章

利用css3选择器及css3边框做出的特效(1)

利用border-radius及box-shadow制作圆角表格 界面效果图如下: css样式如下所示: * { margin:; padding:; } body { padding: 40px 100px; } .demo { width: 600px; margin: 40px auto; font-family: 'trebuchet MS', 'Lucida sans', Arial; font-size: 14px; color: #444; } /*表格的默认设置*/ table…

CSS3选择器02—CSS3部分选择器

该部分主要为CSS3新增的选择器 接上一篇 CSS(CSS3)选择器(1) 一.通用兄弟选择器: 24:E ~ F,匹配任何E元素之后的同级F元素. div ~ p{ background-color:#00FF00; } 二.属性选择器: 25:E[att ^= val],匹配属性att的值以”val“开头的元素. [id ^= start]{ background-color:red; ] /*匹配以id属性的值为start开头的,如id="start1",id="sta…

css3鼠标悬停图片边框线条动画特效

css3鼠标经过内容区时,边框线条特效效果制作.   html: <div class="strength grWidth hidden"> <div class="homeTitle"> <h2>为什么选择优胜空间?</h2> </div> <ul class="strengthMain"> <li><a href="#"><…

CSS3 选择器浏览器兼容性汇总 IE8

1.css选择器 css(包括css1.css2和css3)有哪些选择器? http://www.w3school.com.cn/cssref/css_selectors.asp 2.CSS3选择器 因为CSS1和CSS2选择器浏览器兼容性很好,因此本文主要讲解CSS3选择器,CSS3选择器一共有21个,他们为: 3.CSS3选择器的兼容性 根据Can I Use:http://caniuse.com/#search=nth-of-type 可知: 结论: (1)对于IE7和IE8浏览器来说,只…

CSS3选择器归类整理

CSS3选择器归类整理(附CSS优先级要点) CSS是用于网页设计可用的最强大的工具之一.使用它我们可以在几分钟内改变一个网站的界面,而不用改变页面的标签.在深入研究CSS选择器之前,我们应该先搞懂CSS优先级是如何工作的.比如给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通过Firebug查看,发现没有起作用的属性被覆盖了.这个时候CSS选择器优先级的问题了. 当我们写CSS的时候需要注意有些选择器在级联(cascade)上会高于其它选择器,我们写在最后…

css3选择器归类整理---基本选择器和属性选择器

css3选择器分类 CSS3选择器分类如下图所示 选择器的语法 1.基本选择器 类型 代码 功能描述 通配选择器 *{ margin: 0; padding: 0; border: none; } 选择文档中所有HTML元素 元素选择器 body { background: #eee; } 选择指定类型的HTML元素 类选择器 .list { list-style: square; } 选择指定class属性值为"class"的 任意类型的任意多个元素 ID选择器 #list { wi…

（转）利用 SVG 和 CSS3 实现有趣的边框动画

目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四> 基础API SVG 学习<五> SVG动画 SVG 学习<六> SVG的transform SVG 学习<七> SVG的路径——path(1)直线命令.弧线命令 SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令.光滑贝塞尔曲线命令 (转…

利用CSS3选择器实现表格的斑马纹

要用到的Css3选择器 element:nth-child(number){ } 选择器匹配属于其父元素的第 number 个子元素 参数 Number odd 奇数 even 偶数 W3School介绍:http://www.w3school.com.cn/cssref/selector_nth-child.asp 完整demo: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q…

CSS3 选择器——伪类选择器

前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择器中的第三部分,也是最后一部分——伪类选择器.伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法,最后把重心放到CSS3新增加的":nth-child"选择…

CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)

使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属性选择器.伪类选择器.过滤选择器,减少了对HTML类名或ID名的依赖,避免了对HTML结构的干扰,使编写代码更加简单轻松. 根据所获取页面中元素的不同,可以把CSS3选择器分为5大类:基本选择器.组合选择器.伪类选择器.伪元素和属性选择器.其中,伪类选择器又分为6种:动态伪类选择器.目标伪类选择器.…