CSS3快速入门教程：新特性

最新推荐文章于 2022-09-28 20:39:38 发布
最新推荐文章于 2022-09-28 20:39:38 发布
阅读量709 收藏
点赞数
分类专栏： CSS



CSS3 离我们越来越近了。尽管，很多人指出CSS3这样那样的缺陷，如标准还没有最后完善、浏览器的支持也不够全面。但是，有哪次变革毋须阵痛呢？技术的革新是大势所趋，早点熟悉它绝对没

     CSS3离我们越来越近了。尽管，很多人指出CSS3这样那样的缺陷，如标准还没有最后完善、浏览器的支持也不够全面。但是，有哪次变革毋须阵痛呢？技术的革新是大势所趋，早点熟悉它绝对没有坏处。

 

本文中，笔者带各位熟悉一下CSS3的一些新特性；并给出目前主流浏览器对它的支持情况。算是CSS3的快速入门了。

 

投入CSS3的怀抱

       很多博客文章中都会谈到CSS3的一些缺点还不够完美（尤其是浏览器的兼容性），这让很多网页设计者们对它敬而远之。不要以这个借口就不使用CSS3，没有它，我们还停留在CSS2.1阶段呢。

       其实目前大部分浏览器都是全面或部分支持CSS3的（IE<9.0除外）。尤其对于日趋壮大的手机、平板电脑用户来说。由于其内嵌的浏览器多不是IE内核的^_^。

 

基于这个原因，笔者会在下面的每个示例中明确地给出该项css3属性浏览器的兼容性，以供各位设计时参考。

 
 
 

第三方前缀（Vendor Prefixes）

        这个属性其实最初是为网页测试设计的。但在实际的应用中，利用第三方前缀来为不同浏览器设置同一属性也屡见不鲜。

目前这些前缀有：
-moz- ： 火狐浏览器
-webkit-： 基于webkit核心的浏览器，如Safari、Chrome。
-o-：Opera浏览器
-ms-：IE浏览器

带第三方前缀的属性为网站兼容性提供很好的便利。

 
 
 

常用CSS3新属性：

CSS圆角

       这个恐怕是使用最多的CSS3属性了。在此之前如果要为div标签或按钮添加圆角那可要大费周折地做一堆类和图片来实现。到了CSS3只要一句语法就能搞定：

使用方法：

  
  
  1. border-radius: [<length> | <%>]; 
  2. border-radius: [top-left] [top-right] [bottom-right] [bottom-left]; 
  3. border-top-left-radius: [<length> | <%>]; 

和其他CSS属性一样，可以定义一条总的规则；也可以为每个角定义不同角度。如何使用第三方前缀，用法略有区别：

WebKit（chorme浏览器，safari浏览器）

      使用border-radius定义圆角时，webkit浏览器只认前两个值。解决方法是使用长格式定义如border-top-left-radius。

Mozilla（friefox火狐浏览器）

     火狐浏览器的长格式圆角定义与其他略有不同

  
  
  1. -moz-border-radius-topleft:10px;   
  2. -moz-border-radius-topright:10px;   
  3. -moz-border-radius-bottomleft:10px;   
  4. -moz-border-radius-bottomright:10px; 

 

示例：

css3-quick-guide-demo1

 CSS代码：

  
  
  1. #1 {border-radius:10px;}   
  2. #2 {border-radius:50%;}   
  3. #3 {border-radius:25px 5px;}   
  4. #4 {border-radius:40px 30px 20px 10px;} 

 

 兼容性

     IE9+，Safari 3.2以上[WebKit的前缀]，Safari 5以上，Chrome 4 +和Firefox 3.0 + [-MOZ-前缀 Opera 10.5 +

 

 
 
CSS颜色(Color)

      CSS3颜色最大的改进是支持了alpha透明度选项。而之前CSS却无法做到这点。

  
  
  1. color: rgba([<0-255>],[<0-255>],[<0-255>],[<0-1.0>]);   
  2.  
  3. color: hsla([<0-360>],[<%>],[<%>],[<0-1.0>]); 

 HSL为色彩体系的：色相（Hue），饱和度（Saturation），明度（Lightness）,，透明度（Alpha）

 

      最后一个选项指定透明度。另外，边框的颜色和阴影也支持这种带透明度选项的颜色设定。如果希望和老的浏览器兼容，那么就要额外定义一个。

  
  
  1. color:rgb(0,0,0); color: rgba(0,0,0,0.5); 

 

示例：

css3-quick-guide-demo1

 

  
  
  1. #1 {background:rgba(255,255,255,0.3);}  
  2. #2 {background:rgba(45,35,200,0.5);}  
  3. #3 {background:hsla(225,90%,10%,0.2);}  
  4. #4 {background:hsla(125,100%,50%,0.5);} 

 

兼容性：

IE9 +，Safari 3.2以上，Chrome 5 +和Firefox 3.0 +，Opera 10.1 +

 

 

 

CSS文字阴影 (Text Shadow)

      该属性可以指定文字显示阴影，以及阴影的颜色、位置、模糊度

  
  
  1. text-shadow: [color] [x-coordinate] [y-coordinate] [blur radius];    
  2.  
  3. text-shadow: #000000 10px -5px 3px; 

      指定的颜色可以是任意的RGB或HSL色表中的一个。X，Y表示阴影的相对位置，可正可负。

模糊度的值可以大于等于0的任意整数，默认为0。

      其实，CSS文字阴影早在CSS2.0的标准制定中就被提了出来。可惜到3.0版本才得以实现。遗憾的是，目前IE 9系列仍然不支持这个属性。

 

示例：

css3-quick-guide-demo3

 CSS代码： 

  
  
  1. #1 {text-shadow:rgba(0,0,0,0.5) 1px 1px 0;}   
  2. #2 {text-shadow:rgba(0,0,0,0.7) 5px 5px 3px;}   
  3. #3 {text-shadow:rgba(45,35,200,0.7) -10px -10px 3px;} 

 

兼容性：

Safari 3.2 +，Chrome4 +，火狐3.0 +，Opera 10.1 +

 

 

 

盒子阴影(Box Shadow)

      CSS盒子的概念各位如果不清楚的请搜索之。盒子阴影和文字阴影略有不同，一个是基于div之类的块元素，另一个则是针对文字。

  
  
  1. text-shadow: [x-coordinate] [y-coordinate] [blur radius] [color];   
  2. text-shadow: 10px -5px 3px #000000;   
  3. text-shadow: inset 10px -5px 3px #000000; 

 

       它的定义方法和文字阴影差不多。之前只有在PS中才有的内阴影、外阴影如今只需一句css定义了。

  
  
  1. text-shadow: inset 10px -5px 3px #000000, 10px -5px 3px #000000; 

 示例：

css3-quick-guide-demo4

 CSS代码：

  
  
  1. #1 {box-shadow:10px 10px 0 #666666;}   
  2. #2 {box-shadow:-10px -10px 5px #666666;}   
  3. #3 {box-shadow:inset -5px -5px 0 rgba(255,255,255,0.5);}  
  4. #4 {box-shadow:5px 5px 5px #666666, inset 5px 5px 5px rgba(255,255,255,0.5);} 

 

兼容性

SupportIE9+, Safari 3.2+[-webkit- prefix], Safari 5+, Chrome 4+, Firefox 3.5+ [-moz- prefix], Opera 10.5+

 

 

CSS多重背景

      可以为一个div定义多个背景图片。而在此之前，我们实现的方法是使用多个div，并为每个div定义一个背景图片。

  
  
  1. background: url([image]) [position] [repeat], url([image]) [position] [repeat]; 

 

示例：

css3-quick-guide-demo5

 

  
  
  1. {background:url(lollipop.png) 10px 10px no-repeat, 
  2.             url(stripes.png) left bottom repeat-x, 
  3.             url(diagonal-pattern.jpg), #FFFFFF;
  4.                                                   } 

 

 兼容性

IE9+, Safari 3.2+, Chrome 4+, Firefox 3.6+, Opera 10.5+

     需要注意的是，如果要保持对旧浏览器的兼容，则需要额外再定义一个background以作备用

 

 

 

 

背景大小

      CSS3既然能够制定多重背景，那么指定背景大小也不在话下。

  
  
  1. background-size: [<length> | <%> | <auto>] [<length> | <%> | <auto>];   
  2. background-size: 100% auto;   
  3. background-size: 100% auto, 10px 10px; 

 

兼容性

IE9+, Safari 3.2+, Chrome 4+, Firefox 3.6[-moz- prefix], Firefox 4+, Opera 10.5+

 

 

 

background-clip 和 background-origin

       这两个属性用来确定背景的定位。

 

background-clip 用来判断 background 是否包含 border 区域。

background-origin 用来决定 background-position 计算的参考位置。

  
  
  1. background-origin: [<border-box> | <padding-box> | <content-box>];   
  2. background-clip: [<border-box> | <padding-box> | <content-box>]; 

 

对于 background-clip：

     如果是 padding 值，则 background 包括padding范围，border 是透明的。如果是 border 值，则background 包括border 区域。如果 background-image（in CSS3 via W3C） 图片有多个，对应的 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-quick-guide-demo6

 

兼容性

IE9+, Safari 3.2+[-webkit- prefix], Chrome 4+[-webkit- prefix], Firefox 4+, Opera 10.5+

 

 

 

图片边框

       在CSS2中边框只能是一成不变的一条直线，要么是实线，要么是虚线。如此乏味的设计当然不能满足网页设计的需要。应运而生了许多边框设计方案。

      到CSS3里，人家给你统一了，直接可以定义图片边框，简单而又有趣。

   
   
  1. border-image: [img] [slice] [<repeat> | <round> | <stretch>];   
  2.  
  3. border-top-image: [img] [slice] [<repeat> | <round> | <stretch>];   
  4.  
  5. border-corner-image: [img] [slice] [<repeat> | <round> | <stretch>];   
  6.  
  7. border-top-left-image: [img] [slice] [<repeat> | <round> | <stretch>]; 

 

示例：

css3-quick-guide-demo7

  
   
   
  1. #1 {border-image:url(border.jpg) 15 15 15 15 round;}  
  2.    
  3. #2 {border-width:15px; border-image:url(border.jpg) 15 15 15 15 round;}   
  4.  
  5. #3 {border-width:15px; border-image:url(border.jpg) 15 15 15 15 stretch;}   
  6.  
  7. #4 {border-width:20px; border-image:url(border.jpg) 15 15 15 15 repeat;} 

 

      基于这个定义我们就可以设计五花八门的独特边框啦^_^

兼容性

Safari 3.2+[-webkit- prefix], Chrome 5+[-webkit- prefix], Firefox 3.5+ [-moz- prefix], Opera 10.5+

 

 

其他一些新特性：

       讲了不少，其实CSS3的新特性远不止这么多。笔者也不能一个个全都说一遍^_^。挑几个常用的属性为各位详细叙述下。

余下的，笔者简单提一下，如果感兴趣的朋友可以自己搜索一下自行阅读啦。

 

选择符

选择符类型

表达式

描述

子串匹配的属性选择符

E[att^="val"]

匹配具有att属性、且值以val开头的E元素

子串匹配的属性选择符

E[att$="val"]

匹配具有att属性、且值以val结尾的E元素

子串匹配的属性选择符

E[att*="val"]

匹配具有att属性、且值中含有val的E元素

结构性伪类

E:root

匹配文档的根元素。在HTML中，根元素永远是HTML

结构性伪类

E:nth-child(n)

匹配父元素中的第n个子元素E

结构性伪类

E:nth-last-child(n)

匹配父元素中的倒数第n个结构子元素E

结构性伪类

E:nth-of-type(n)

匹配同类型中的第n个同级兄弟元素E

结构性伪类

E:nth-last-of-type(n)

匹配同类型中的倒数第n个同级兄弟元素E

结构性伪类

E:last-child

匹配父元素中最后一个E元素

结构性伪类

E:first-of-type

匹配同级兄弟元素中的第一个E元素

结构性伪类

E:only-child

匹配属于父元素中唯一子元素的E

结构性伪类

E:only-of-type

匹配属于同类型中唯一兄弟元素的E

结构性伪类

E:empty

匹配没有任何子元素（包括text节点）的元素E

目标伪类

E:target

匹配相关URL指向的E元素

UI元素状态伪类

E:enabled

匹配所有用户界面（form表单）中处于可用状态的E元素

UI元素状态伪类

E:disabled

匹配所有用户界面（form表单）中处于不可用状态的E元素

UI元素状态伪类

E:checked

匹配所有用户界面（form表单）中处于选中状态的元素E

UI元素状态伪类

E::selection

匹配E元素中被用户选中或处于高亮状态的部分

否定伪类

E:not(s)

匹配所有不匹配简单选择符s的元素E

通用兄弟元素选择器

E ~ F

匹配E元素之后的F元素

 

 

Media Queries

      Media Queries可以针对不同设备的一些Media属性设定不同的CSS属性或者是不同的CSS文件调用。

   
   
  1. @media screen and (max-width: 800px) {   
  2.     body {background: #000000;}   
  3. } 

css3-quick-guide-demo8

 

可以看到在不同的宽度设置下，呈现不同的布局。这对于正如日中天的移动平台应用无疑有着巨大的影响力。

兼容性

IE9+, Safari 3.2+, Chrome 5+, Firefox 3.5+, Opera 10.1+

 

 

后记：

      这片东拼西凑的东西终于写完了，笔者深感欣慰。上班时间快到了，css快速入门到此结束。笔者自己其实也是学员之一。希望这篇文章能对你有点小小的作用^_^。

 

 

背景大小

CSS3既然能够制定多重背景，那么指定背景大小也不在话下

 

  
  
  1. background-size: [<length> | <%> | <auto>] [<length> | <%> | <auto>];   
  2. background-size: 100% auto; background-size: 100% auto, 10px 10px; 
寒风问雪
关注
专栏目录
CSS3新特性
qq_43276642的博客
05-20 3152
1.选择器： 伪元素选择器 ::before ::after ::first-line ::first-letter ::section 伪类选择器 .list>li:first-child 选中第一个子元素 .list>li:last-child 选中最后一个子元素 .list>li:nth-child(n) 选中第五个子元素 .list>li:nth-child(odd) 选中偶数行 .list>li:nth-child(...
HTML5+CSS3网站设计基础教程_动手实践源代码
08-01
HTML5+CSS3网站设计基础教程_动手实践源代码
CSS3(入门)
热爱编程、热爱生活、热爱探索
02-19 8769
目录一、CSS3基本概念和作用 一、CSS3基本概念和作用 Html5是网页的结构，css3是网页的表现（美化），javaScript是网页的交互。 菜鸟教程（学习的工具网站） 概念：CSS又叫层叠样式表( Cascading Style Sheets )是一种用来表现HTML或XML等文件样式的计算机语言，3是版本号。CSS于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 作用：美化网页（字体
狂神说——CSS3最新教程快速入门通俗易懂
淡水瑜的博客
05-24 1243
参考资料 文章目录1.CSS的简单介绍2.什么是CSS和发展史3.CSS的快速入门及优势4.四种css导入方式5.三种基本选择器（重要）6.层次选择器7.结构伪类选择器8.属性选择器（常用重要）9.CSS的作用及字体样式10.文本样式11.文本阴影和超链接伪类12.列表样式练习13.背景图像应用及渐变14.盒子模型及边框使用（重要）15.内外边距及div居中16.圆角边框及阴影和经验分享17.display（重要）和浮动18.overflow及父级边框塌陷问题19. 相对定位的使用及练习20.方块定位练习讲
CSS3快速入门
m0_52992147的博客
09-17 180
1.什么是CSS 如何学习 1.CSS是什么 2.CSS怎么用（快速入门） 3.CSS进择器(重点+难点) 4.美化网页（文字，阴影，超链接，列表渐变…) 5.盒子模型 6.浮动 7.定位 8.网页动画（特效效果） 1.1什么是CSS
CSS3 入门教程
Ifeng_iPhone的博客
09-28 956
css就是样式表，用来给html添加样式的html本身是素颜的，css就是化妆师，让我们html好看点。
CSS网页布局入门教程13：下拉及多级弹出式菜单
10-30
ovver ul,li.over ul 的选择器组合是关键所在，它们定义了当鼠标悬停在li元素上时（`:hover`）或者li元素处于激活状态（`:over`，虽然`:over`不是标准的CSS伪类，但在某些浏览器中可能被支持，通常用`:hover`即可...
HTML5+CSS3+JS入门教程 + 源代码 pdf
03-28
CSS3（Cascading Style Sheets 3）则是CSS的最新版本，它引入了许多新特性，如选择器的扩展、多列布局、过渡和动画、边框和背景的改进、以及响应式设计的支持。比如，你可以使用媒体查询（@media）来实现不同设备或...
HTML5与CSS3基础教程（第八版）
01-18
万维网成功的根基，是一种基于文本的标记语言──HTML，它简单易学，并且能被任何带有基本Web浏览器的设备识读。每个网页都至少用一点儿HTML，否则也就不能称为网页了。 随着学习的深入细致，你会了解到，HTML用于定义内容的含义，而CSS用于定义内容和网页如何显示。HTML页面和CSS文件（样式表，stylesheet）都是文本文件，因此很容易编辑。在下面的“如何使用本书”一节，你将看到一些HTML和CSS的代码片段
html5+css3从入门到精通
07-03
本教程"html5+css3从入门到精通"针对前端新手，旨在帮助初学者快速掌握这两项核心技术。 HTML5（超文本标记语言第五版）是网页内容结构的标准，它引入了许多新的元素和属性，以更好地表达内容的语义。例如，`...
尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频尚品汇项目源码
03-06
4. CSS3新特性：探索Flexbox和Grid布局，理解如何实现响应式设计，以及如何创建动态效果。 5. 实战项目：通过“尚品汇”项目，学习如何将所学知识应用于实际开发中，提升动手能力。 总的来说，这个教程为想要进入...
css3入门教程
Hi, I'm Cocoa!
05-08 527
认识CSS3css3介绍css语法css注释css三种链接方式内联式css样式嵌入式css样式外部式css样式三种链接方式优先级（更新中） css3介绍 CSS（Cascading Style Sheets）:层叠样式表，主要用来定义HTML在浏览器显示出来的样式，比如文字的大小、颜色等。 css语法 css样式由选择符和声明组成，声明由属性和值组成。 css注释 /*注释语句 */ css三种...
CSS3 弹性布局快速入门
weixin_34064653的博客
06-06 203
前言 弹性布局是新一代的布局方式，传统布局中使用浮动布局会给我们带来不少弊端，如CSS代码高度依赖于HTML代码结构等等，下面我将用几个例子让大家快速学会弹性布局。 PS：弹性布局适用于较简单的场景，过于复杂的场景可以尝试着使用CSS3的Grid布局，弹性布局在PC端中还存在兼容性问题，移动端中无兼容性问题，可以放心使用。 1.容器属性 css3为新增的弹性布局提供了多个属性，分别为弹性盒模型的容...
web前端——CSS3快速入门
一条小黑龙的博客
08-30 597
web前端——CSS3快速入门
CSS3零基础快速入门
D_Low的博客
07-03 588
2. 子选择器：只能选择作为某元素的最近一级子元素，直接后代，只能选择该元素儿子级的元素 3. 并集选择器：任意形式的选择器只需要用 一个逗号连接就是并集选择器，用于选择多组目标 4. 链接伪类选择器 5. :focus伪类选择器：选取获取焦点的表单元素。一般指 input 类的标签 6. 属性选择器：根据某个元素是否包含某种属性选择 选择器 描述 E[att] 选择具有 att 属性的 E 元素 E[att=“val”] 选择具有 att 属性且属性值等于 val 的 E 元素
CSS3快速入门，你想了解的这篇文章都有哦
weixin_46088557的博客
02-04 116
1. CSS 1.1 什么是CSS Cascading Style Sheet 层叠样式表 美化网页 字体 颜色 浮动 网页定位 高度 宽度 1.2 发展史 CSS1.0 CSS2.0 DIV(块)+CSS HTML与CSS结构分离的思想，网也变得简单，SEO：搜索引擎优化 CSS2.1 浮动，定位 CSS3.0 圆角边框，阴影，动画… 浏览器兼容问题 1.3 快速入门 style基本入门： <!DOCTYPE html> <html lang="en"> &l
5116-微信小程序电影院订票选座系统设计及实现+ssm（源码+数据库+lun文）.zip
最新发布
09-15
本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值