9  透明属性 元素透明也是我们常用的样式,在CSS2中使用滤镜属性opacity实现透明效果.现在有了CSS3的rgba属性,就不用这么麻烦了,当然这也得要浏览器支持才行.通常我们定义颜色都是用十六进制表示.例如,background:#000000,表示背景色为黑色.当然也可以用RGB三原色值表示,例如,background:rgb(0,0,0),也表示背景色为黑色.RGBA只是在RGB的基础上增加了一个A,这个A表示透明度.而且这个属性不会被子元素继承下去,可以在定义颜色的属性时使用.应用…

通过CSS选择器找到元素,就要使用CSS属性给找到的元素设置样式.尽管现在的浏览器已经支持了众多的CSS3属性,但作为初学者,最应该关注的就是一些“主流”的属性,如border-radius.box-shadow.transform等.它们有良好的文档.极佳的测试效果并且经常用到,将成为你设计网站的得力助手.学习CSS3的属性就要先从主流的属性开始,其他属性则可通过CSS3手册获得帮助.具体实例展示,读者可以在下一章大量学习.本节主要学习CSS3属性的用法及兼容性. 1  使用CSS3属性前的准…

CSS3规范中对背景这一部分,新加入了一些有用的功能,如可以设置多个背景图片.可以指定背景大小.设置背景渐变等功能.CSS3规范中定义的背景属性新增了background-clip.background-origin.background-size,这三个属性描述如表1: 表1  CSS3新增背景属性 1  多背景 CSS3允许设置多个背景图片,每个背景用逗号隔开,每个背景图片占一层,层的上下显示按照在CSS中写的顺序来定,最先写的背景在最上层. 多背景的格式如下: background: ur…

渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果上来看,与设计并无任何差异.事实上这种方法是比较麻烦的,因为首先需要设计师进行设计,然后进行切图,在通过样式应用到页面中.另外,在实际应用中可扩展性差,还直接影响页面性能.值得庆幸的是,W3C组织将渐变设计收入到CSS3标准中,让广大的前端设计师直接受益,可以直接通过CSS3的渐变属性制作类似渐变图…

在Web制作中,有些时候需要实现一些倒影的效果.在传统网页中,我们只能使用photoshop事先将倒影设计好,然后导入到网页中,这样不但耗费资源,也阻碍了开发效率.而CSS新增了Reflections板块,CSS Reflections允许设计倒影,目前,CSS Reflections仅获得webkit引擎的支持,我们只能够在Chrome和Safari浏览器中测试.CSS3的box-reflect属性,使我们可以对图片.文字等进行倒影设计,具体语法: box-reflect: none | <d…

对于设计人员和开发人员来说,CSS一直是web设计过程中重要的一部分.网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式.随着CSS3的出现以及越来越多的浏览器对它的支持,设计师们有了更多的选择.CSS3可以让网页增添了不少的动画元素,让我们的网页变得更加生动有趣,并且易于交互.本章利用CSS3的样式属性来制作出丰富多彩的网页.在本章中,我们为CSS3的样式属性作一个介绍,列出该属性的属性及用法.使用该样式属性制作一些小案例来对网页样式进行设置.让读者可以更加直…

小结 在互联网上,图像和链接则是通过URL唯一确定信息资源的位置.URL分为绝对URL和相对URL.通过使用<img />标记在浏览器中显示一张图像.超文本具有的链接能力,可层层链接相关文件,这种具有超链接能力的操作,称为超链接.链接文档中的特定位置也称为锚点,定义锚点和超链接都使用<a>标记.图像地图是带有可点击区域的图像,每个区域是一个相关的超级链接.video和audio这两个HTML5新增加的元素,它们分别用来处理视频与音频数据,使得多媒体播放再也不需要安装插件了. 习题…

7  多列布局属性 通过CSS3,开发人员能够创建多列来对文本进行布局.在CSS2时代,对于多列布局的设计,大多采用浮动布局和绝对定位布局两种方式.浮动布局比较灵活,但是需要编写大量的附加样式代码,而且在网页缩放等操作下容易发生错位,影响网页整体效果.绝对定位方式要精确到标签的位置,但固定标签位置的方式无法满足标签的自适应能力,也影响文档流的联动.CSS3新增了columns属性,即多列自动布局功能,利用该功能可以自动将内容按指定的列数排列(例如,columns: 250px 3,250px表示…

5 用户界面属性 在CSS3中,新的用户界面特性包括重设元素尺寸.盒尺寸及轮廓等.本小节着重介绍一下resize属性,只有Firefox 4和Safari 3浏览器支持此属性.resize属性可用于重定义textarea的大小,可能的值包括如下几种. Ø none:UserAgent没有提供尺寸调整机制,用户不能调节元素的尺寸. Ø both:UserAgent提供了双向尺寸调整机制,用户可以调节元素的宽度和高度. Ø horizontal:UserAgent提供了单向水平尺寸调整机制,用户可以…

3  背景属性 在CSS3中提供了多个背景属性,这里只介绍两个比较常用的属性,其他属性可以从手册中获取帮助.在CSS3中,通过background-image或者background属性可以为一个容器设置多张背景图片,也就是说可以把不同的背景图片放到一个块元素中.多张背景图片的URL之间使用逗号隔开即可.如果有多张背景图片,而其他属性只有一个,那么所有背景图片都应用该属性值.代码如下所示: 背景图片大小调整也是CSS3提供的一个新特性,它使得开发人员可以随心所欲地控制背景图片的尺寸大小.在CSS…