`
流浪鱼
  • 浏览: 1682215 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

css3新的功能

    博客分类:
  • css3
 
阅读更多

1.属性选择器

[id=articel]{
     color:red;
}

[id*=articel]{
     color:red;
}


[id^=articel]{
     color:red;
}


[id$=articel]{
     color:red;
}

 2.伪类选择器

 :first-child选择某个元素的第一个子元素;

  1.  :last-child选择某个元素的最后一个子元素;
  2.  :nth-child()选择某个元素的一个或多个特定的子元素;
  3.  :nth-last-child()选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;
  4.  :nth-of-type()选择指定的元素;
  5.  :nth-last-of-type()选择指定的元素,从元素的最后一个开始计算;
  6.  :first-of-type选择一个上级元素下的第一个同类子元素;
  7.  :last-of-type选择一个上级元素的最后一个同类子元素;
  8.  :only-child选择的元素是它的父元素的唯一一个了元素;
  9.  :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素;
  10.  :empty选择的元素里面没有任何内容。
  11. :before和:after,在元素前边和后边添加内容
  12. <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>css3样式</title>
    	<style type="text/css">
    		p:before{
    			content:'前面的文字'
    		}
    		
    		p:after{
    			content:"后面的内容"
    		}
    
    	</style>
    <head>
    <body>
    <p>p的内容</p>
    </body>
    </html>
     box-shadow元素阴影
  13. .shadow {
        -moz-box-shadow: 3px 3px 4px #000;
        -webkit-box-shadow: 3px 3px 4px #000;
        box-shadow: 3px 3px 4px #000;
        /* For IE 8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
        /* For IE 5.5 - 7 */
        filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
    }
     释义为:横向偏移3像素,纵向偏移3像素,模糊4像素,颜色为纯黑。
  14. text-shadow文字阴影
  15. text-shadow:color length length length; 
  16. color:颜色; length分别按顺序指”X轴方向长度 Y轴方向长度 阴影模糊半径” 
  17. 正值在X轴表示向右,负值表示向左.同样的道理Y轴负值是表示向上. 
  18. 其中任意一个值可以为零也可为空(将做默认处理)

 

 

 

 

分享到:
评论

相关推荐

    HTML5中文手册 + CSS3中文手册

    其他特性包括新的页面元素,比如 , , , ...包含的一些css3新功能如圆角、多背景、@font-face 用户自定义字体、动画与渐变、渐变色、盒阴影、RGBa – 加入透明色、文字阴影等等及现在浏览器的兼容识别程度都弄得很清楚。

    CSS3基础.xmind

    前端入门思维导图CSS3基础知识(1)原图。 1.CSS3新功能:相比CSS2增加了许多的新功能; 2.CSS3的基本语法; 3.CSS3的样式表; 4.CSS3的两个基本特性。

    CSS3教程和css3新特性专题

    【CSS3教程和css3新特性专题】 CSS3是 Cascading Style Sheets(层叠样式表)的第三版,是Web设计领域的一个重要里程碑,引入了许多新的功能和特性,极大地增强了网页设计的灵活性和表现力。这个专题将深入探讨CSS3...

    最新的CSS参考手册3.0版本

    备受期待的 CSS 3 新功能 圆角、多背景、@font-face 用户自定义字体、动画与渐变、渐变色、盒阴影、RGBa - 加入透明色、文字阴影等等 CSS3 的出现,让代码更简洁、页面结构更合理,性能和效果得到兼顾。

    CSS参考手册中文版3.0chm版最新版本

    备受期待的 CSS 3 新功能圆角、多背景、@font-face 用户自定义字体、动画与渐变、渐变色、盒阴影、RGBa - 加入透明色、文字阴影等等CSS3 的出现,让代码更简洁、页面结构更合理,性能和效果得到兼顾。

    纯CSS3多功能录音机特效.zip

    首先,CSS3是层叠样式表的第三个版本,它引入了许多新特性和改进,使得网页设计更加丰富和动态。在"纯CSS3多功能录音机特效"中,CSS3被用来创建视觉上的录音机界面,包括按钮、滑块、录音状态指示器等元素。可能用到...

    HTML5 CSS3 chm中文参考手册_html5_CSS3_css3.chm_参考手册_

    压缩包中的"CSS3.0(飘零雾雨版).chm"很可能是针对CSS3的一个详细教程或参考文档,涵盖了CSS3的所有新特性、语法和实例。而"HTML5(W3CSchool版).chm"则可能包含W3School提供的HTML5学习资料,包括基本概念、元素...

    ie支持css3部分功能

    在IT行业中,CSS3是层叠样式表的第三版,带来了许多令人兴奋的新特性,显著提升了网页设计的视觉效果和用户体验。然而,IE(Internet Explorer)浏览器,特别是早期版本,对CSS3的支持并不完全,这使得开发者在创建...

    CSS3特效-CSS3实现烟花特效

    CSS3是层叠样式表(Cascading Style Sheets)的第三版,它引入了许多新特性和功能,极大地扩展了网页设计的可能性,包括动画和特效。烟花特效就是其中的一种,它可以为网页增添节日氛围或者为用户界面带来独特的视觉...

    CSS 3.0 参考手册压缩文件 放心非病毒

    备受期待的 CSS 3 新功能: 圆角、多背景、@font-face 用户自定义字体、动画与渐变、渐变色、盒阴影、RGBa - 加入透明色、文字阴影等等 CSS3 的出现,让代码更简洁、页面结构更合理,性能和效果得到兼顾。

    CSS 3.0 中文参考手册

    备受期待的 CSS 3 新功能: 圆角、多背景、@font-face 用户自定义字体、动画与渐变、渐变色、盒阴影、RGBa - 加入透明色、文字阴影等等 CSS3 的出现,让代码更简洁、页面结构更合理,性能和效果得到兼顾。

    CSS 参考手册中文版 3.0

    备受期待的 CSS 3 新功能 圆角、多背景、@font-face 用户自定义字体、动画与渐变、渐变色、盒阴影、RGBa - 加入透明色、文字阴影等等 CSS3 的出现,让代码更简洁、页面结构更合理,性能和效果得到兼顾。

    js+css实现换肤功能

    1. 避免闪烁:为了防止页面样式瞬间丢失,可以先将新的CSS加载到内存中,再替换旧的CSS链接。 2. 兼容性处理:对于不支持JavaScript的浏览器,可以提供一种静态的换肤方式,如通过超链接直接跳转到不同皮肤版本的...

    HTML 与 CSS3 各种文档

    6. **CSS3新属性**:例如`transform`用于2D/3D转换,`opacity`控制透明度,`filter`实现图像滤镜效果等。 此外,"10 HTML5、CSS3应用教程之 跟DIV说Bey!Bey! .doc"可能是一个关于HTML5和CSS3实际应用的教程,特别是...

    CSS权威指南 css彻底设计研究 HTML5和CSS3实战 HTML5与CSS3设计模式

    此外,通过实际案例,读者将学习如何结合CSS3的新功能,如多列布局、渐变、阴影、边框半径、转换和动画,以提升网页的视觉效果和用户体验。 最后,"HTML5与CSS3设计模式"关注的是这两种技术的创新设计思路。设计...

    css2|css3

    在IT行业中,CSS(Cascading Style Sheets)是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档的样式语言,...随着技术的发展,开发者应逐渐适应并掌握CSS3的新特性,以实现更加现代化和功能丰富的网页设计。

    CSS 3.0 中文参考手册,层叠样式表下载.rar

    备受期待的 CSS 3 新功能 圆角、多背景、@font-face 用户自定义字体、动画与渐变、渐变色、盒阴影、RGBa - 加入透明色、文字阴影等等 CSS3 的出现,让代码更简洁、页面结构更合理,性能和效果得到兼顾。

    ie-css3.htc 免费版

    因此,对于新项目和现代浏览器,建议优先使用原生CSS3支持,仅作为旧版IE浏览器的降级处理。 总的来说,ie-css3.htc是开发者为了兼容老版本IE浏览器而采取的一种过渡策略,它让那些无法直接理解CSS3的浏览器也能...

    《CSS3实战》配套源码part3

    《CSS 3实战》技术新颖,基于CSS3的最新版本撰写,所有新功能和新特性尽含其中;内容全面,不仅讲解了CSS3的方方面面,而且还在一些关键的功能点上与CSS2.x进行了充分的比较;实战性强,几乎所有知识点都配有案例,...

Global site tag (gtag.js) - Google Analytics