CSS是众所周知且应用广泛的网站样式语言,在它的版本三(CSS3)计划中,新增了一些能够节省时间的特性。尽管只有当前最新了浏览器版本才能支持这些 效果,但了解它们还是必须且很有趣味性的。CSS3中的5个有趣的新技术:圆角、个别圆角、不透明度、阴影和调整元素大小。
基本标记
在我们开始这个教程之前,先来创建整个教程都要使用的基本标记。我们的XHTML需要以下div元素:
- #round, 使用CSS3代码实现圆角.
- #indie, 应用个别的几个圆角.
- #opacity, 展示新的CSS3实现不透明度的方式.
- #shadow,展示不使用Photoshop的情况下,使用CSS3来实现阴影效果.
- #resize, 展示如何使用某种CSS来实现重设大小的效果.
综上所述,我们的xHTML应该是这样的:
04 |
< meta http-equiv = "Content-Type" content="text/html; charset = utf -8″ /> |
05 |
< title >An Introduction to CSS3; A Nettuts Tutorial</ title > |
06 |
< link href = "style.css" rel = "stylesheet" type = "text/css" /> |
10 |
< div id = "round" > </ div > |
11 |
< div id = "indie" > </ div > |
12 |
< div id = "opacity" > </ div > |
13 |
< div id = "shadow" > </ div > |
15 |
< img src = "image.jpg" alt = "resizable image" width = "200″ height=" 200″> |
下面来创建基本CSS文件:
02 |
background-color : #fff ; |
正如你上面看到的,我们给每个div元素300px的宽和高,并让它们向左浮动,整个页面的div都留给我们在后面的工作中添加样式。
圆角
目前而言,创建圆角的方法有很多,但都很麻烦。最常用的方法:首先,你要创建圆角的图片;然后,你要创建很多html元素并使用背景图像的方式显示圆角。具体流程你我都很清楚。
这个问题将在CSS3中很简单的解决掉,那就是叫做"border-radius"的属性。我们先创建一个黑色的div元素并给他设置黑色的边框。边框就是要实现"border-radius"属性效果的前提。
像这样:
2 |
background-color : #000 ; |
3 |
border : 1px solid #000 ; |
现在你已经创建了div元素,它看起来和你预期的样子一样,300px款和高有楞有角且是黑色的。下面我们来添加实现圆角的代码,它是如此的简洁,仅仅需要两行代码。
2 |
background-color : #000 ; |
3 |
border : 1px solid #000 ; |
4 |
-moz-border-radius: 10px ; |
5 |
-webkit-border-radius: 10px ; |
在这里,我们添加了两行类似的代码,-moz-适用于Firefox浏览器,而-webkit-则是用于Safari/Chrome浏览器。
注:目前为止IE浏览器不支持border-radius属性,所以如果想让IE也有圆角效果,那么就要单独添加圆角了。
border-radius这个属性直译过来是边框半径的意思,就如同Photoshop一样,它的值越大,圆角也就越大。
个别的圆角
如果按照过去的习惯做法,会浪费你很多时间,现在CSS3能快速解决!
我们现在只想让div的右上和右下是圆角,那么仅需稍作修改:
2 |
background-color : #000 ; |
3 |
border : 1px solid #000 ; |
4 |
-moz-border-radius-topright: 10px ; |
5 |
-moz-border-radius-bottomright: 10px ; |
6 |
-webkit-border-top-left-radius: 10px ; |
7 |
-webkit-border-bottom-left-radius: 10px ; |
试想一下这种做法会用在网页中的什么元素呢?对!就是标签式的导航按钮!
以CSS3的方式修改不透明度
现在你可以按惯例编写几行代码来实现不透明度的效果(hack)。不过CSS3简化了这个流程。
这行代码很好记,仅仅是 "opacity: value;":
2 |
background-color : #000 ; |
阴影效果
实现阴影也有很多方法,最常用的就是使用Photoshop制作成阴影图片,然后应用到背景属性中。但CSS3让你的工作更有效率,不幸的是,目前只有Safari和Chrome支持这个新特性。
仅仅需要一行代码,不过它有4个不同的值:-webkit-box-shadow: 3px 5px 10px #ccc;
第一个3px是指定阴影与div元素之间的水平(横向)距离,第二个5px指的是阴影与div之间的垂直(纵向)距 离,第三个10px指的是阴影的模糊度(类似于photoshop中的羽化),值越大越细腻。最后的值不说大家也知道,就是阴影的颜色。
我们最终阴影效果代码:
2 |
background-color : #fff ; |
3 |
border : 1px solid #000 ; |
4 |
-webkit-box-shadow: 3px 5px 10px #ccc ; |
正如你看到的,我们个这个div设置了白色的背景,黑色的边框和亮灰色的阴影。
调整大小
在最新版本的CSS中,调整元素的尺寸已经成为可能(不过目前仅Safari支持)。
使用这个代码以后,我们的元素的右下角会出现一个小三角以提示用户这个元素是可以调整尺寸的。代码依然很简单,可以说仅需要一行代码,当然你还可以配合使用 一些曾经使用过的属性,比如"max-width", "max-height", "min-width"和 "min-height"。
2 |
background-color : #fff ; |
3 |
border : 1px solid #000 ; |
在这里主要说一下resize和overflow属性,resize:both;的意思就是所有边都可以调整尺寸,它的值还有horizontal和vertical,顾名思义,就是横向和纵向。而overflow是为了配合resize工作的,在这里使用auto。
虽然现在仅有很少数的浏览器支持CSS3,但不可否认的是CSS3的确会为我们的工作节省更多的时间。如果你对渐 进增强有所了解和认识的话,我想你会欣然接受CSS3这个强大的新版本的。不要再把你的时间都花在IE6上了,那样你只能会是过时的前端开发工程师。
- CSS3和H5的新特性
H5的新特性 1. 用于绘画 canvas 元素. 2. 用于媒介回放的 video 和 audio 元素. 3. 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不 ...
- 前端笔记之HTML5&CSS3(上)新特性&音频视频&本地存储&自定义属性
一.HTML5简介 HTML 5 的第一份正式草案已于2008年1月22日公布.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 2014年10月29日,万维网联盟 ...
- HTML5和CSS3中的交互新特性
当文章的标题是一副用photoshop制作的图片,那么势必在搜索引擎中无法搜索到.并且因为图片的体积不算小.可能在网速慢的的时候不得不耐心的等待图片的刷新. 所以.我们来谈谈有没有一种新的方法能够避免 ...
- CSS3新增了哪些新特性
一.是什么 css,即层叠样式表(Cascading Style Sheets)的简称,是一种标记语言,由浏览器解释执行用来使页面变得更为美观 css3是css的最新标准,是向后兼容的,CSS1/2的 ...
- CSS3的新特性
CSS3中增加的新特性: (1)选择器的种类 (2)字体 font (3)text-overflow (4)文本渲染 text-decoration (5)多列布局 column-count (6)R ...
- CSS3新增特性详解(二)
上篇博文主要介绍了CSS3新增特性中的静态特性,比如新的选择器.多背景图.阴影.渐变等.本文主要介绍CSS3中新增的动态特性,如过度.动画.变形等. transitian: -webkit-tran ...
- 奇妙的CSS之CSS3新特性总结
随着CSS3标准的发布,越来越多的浏览器开始支持最新的CSS标准,虽然还有些新特性支持的不够完美,但相信未来的浏览器一定会完全支持CSS3的,毕竟这代表着大趋势!下面l列出来一些CSS3中出现的新特性 ...
- [转]深入了解 CSS3 新特性
简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外 ...
- 【HTML5&CSS3进阶学习02】Header的实现·CSS中的布局
前言 我们在手机上布局一般是这个样子的: 其中头部对整个mobile的设计至关重要,而且坑也很多: ① 一般来说整个header是以fixed布局,fixed这个产物在移动端来说本身坑就非常多 ② 在 ...
随机推荐
- python 连接MSSQL
# -*- coding: utf-8 -*- import pymssql conn=pymssql.connect(host=".",user="sa",p ...
- python2.7练习小例子(二十八)
28):题目:请输入星期几的第一个字母来判断一下是星期几,如果第一个字母一样,则继续判断第二个字母. 程序分析:用情况语句比较好,如果第一个字母一样,则判断用情况语句或if语句判断第二个字母. ...
- shell -- 大括号和小括号
在这里我想说的是几种shell里的小括号,大括号结构和有括号的变量,命令的用法,如下: 1.${var} 2.$(cmd) 3.()和{} 4.${var:-string},${var:+string ...
- springmvc基础篇—修改默认的配置文件名称及位置
springmvc的默认配置文件是放在WEB-INF下的,叫action-servlet.xml.根据咱们编程的习惯,一般都将配置文件放到src的根目录下,那么如何将这个文件迁移过来呢?其实很简单,请 ...
- deepin linux 安装/启动jeakins报错:处理
ERROR: No Java executable found in current PATH: /bin:/usr/bin:/sbin:/usr/sbin 安装报错: 1.如还未安装java,则安装 ...
- 基于Python的接口自动化-01
为什么要做接口测试 当前互联网产品迭代速度越来越快,由之前的2-3个月到个把月,再到班车制,甚至更短,每次发版之前都需要对所有功能进行回归测试,在人力资源有限的情况下,做自动化测试很有必要.由于UI更 ...
- python 学习总结----正则表达式
正则表达式 应用场景 - 特定规律字符串的查找,切割,替换 - 邮箱格式:URl,IP地址等的校验 - 爬虫项目中,特定内容的提取 使用原则 - 只要使用字符串等函数能解决的问题,就不要使用正则 - ...
- 13-Mysql数据库----权限设置
权限管理 我们知道我们的最高权限管理者是root用户,它拥有着最高的权限操作.包括select.update.delete.update.grant等操作.那么一般情况在公司之后DBA工程师会创建一个 ...
- 3.爬虫 urlib库讲解 总结
urllib库的总结: 用ProcessOn(安利这个软件,够用了)根据前面的几节内容做了个思维导图. urllib库一共有四个模块: request:它是最基本的模块,可以用来模拟发送请求 erro ...
- u盘中毒后文件夹没显示了
今日,我的U盘插了有毒的电脑,直接中毒了,先是显示有木马,后是自行产生一些文件,接着文件夹没了,后来自己终于解决了,分享一下,自己先用工具将有嫌疑的文件提炼出来,经自行检查后处理,接着打开文件夹选项, ...