CSS是众所周知且应用广泛的网站样式语言,在它的版本三(CSS3)计划中,新增了一些能够节省时间的特性。尽管只有当前最新了浏览器版本才能支持这些 效果,但了解它们还是必须且很有趣味性的。CSS3中的5个有趣的新技术:圆角、个别圆角、不透明度、阴影和调整元素大小。

基本标记

在我们开始这个教程之前,先来创建整个教程都要使用的基本标记。我们的XHTML需要以下div元素:

  • #round, 使用CSS3代码实现圆角.
  • #indie, 应用个别的几个圆角.
  • #opacity, 展示新的CSS3实现不透明度的方式.
  • #shadow,展示不使用Photoshop的情况下,使用CSS3来实现阴影效果.
  • #resize, 展示如何使用某种CSS来实现重设大小的效果.

综上所述,我们的xHTML应该是这样的:

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02 <html xmlns="http://www.w3.org/1999/xhtml">
03 <head>
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" />
07 </head>
08 <body>
09 <div id="wrapper">
10 <div id="round"> </div>
11 <div id="indie"> </div>
12 <div id="opacity"> </div>
13 <div id="shadow"> </div>
14 <div id="resize">
15 <img src="image.jpg" alt="resizable image" width="200″ height="200″>
16 </div>
17 </div>
18 </body>
19 </html>

下面来创建基本CSS文件:

01 body {
02     background-color: #fff;
03 }
04 #wrapper {
05     width: 100%;
06     height: 100%;
07 }
08 div {
09     width: 300px;
10     height: 300px;
11     margin: 10px;
12     float: left;
13 }

正如你上面看到的,我们给每个div元素300px的宽和高,并让它们向左浮动,整个页面的div都留给我们在后面的工作中添加样式。

圆角

目前而言,创建圆角的方法有很多,但都很麻烦。最常用的方法:首先,你要创建圆角的图片;然后,你要创建很多html元素并使用背景图像的方式显示圆角。具体流程你我都很清楚。

这个问题将在CSS3中很简单的解决掉,那就是叫做"border-radius"的属性。我们先创建一个黑色的div元素并给他设置黑色的边框。边框就是要实现"border-radius"属性效果的前提。

像这样:

1 #round {
2     background-color: #000;
3     border: 1px solid #000;
4 }

现在你已经创建了div元素,它看起来和你预期的样子一样,300px款和高有楞有角且是黑色的。下面我们来添加实现圆角的代码,它是如此的简洁,仅仅需要两行代码。

1 #round {
2     background-color: #000;
3     border: 1px solid #000;
4     -moz-border-radius: 10px;
5     -webkit-border-radius: 10px;
6 }

在这里,我们添加了两行类似的代码,-moz-适用于Firefox浏览器,而-webkit-则是用于Safari/Chrome浏览器。

注:目前为止IE浏览器不支持border-radius属性,所以如果想让IE也有圆角效果,那么就要单独添加圆角了。

border-radius这个属性直译过来是边框半径的意思,就如同Photoshop一样,它的值越大,圆角也就越大。

个别的圆角

如果按照过去的习惯做法,会浪费你很多时间,现在CSS3能快速解决!

我们现在只想让div的右上和右下是圆角,那么仅需稍作修改:

1 #indie {
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;
8 }

试想一下这种做法会用在网页中的什么元素呢?对!就是标签式的导航按钮!

以CSS3的方式修改不透明度

现在你可以按惯例编写几行代码来实现不透明度的效果(hack)。不过CSS3简化了这个流程。

这行代码很好记,仅仅是 "opacity: value;":

1 #opacity {
2 background-color: #000;
3 opacity: 0.3;
4 }

阴影效果

实现阴影也有很多方法,最常用的就是使用Photoshop制作成阴影图片,然后应用到背景属性中。但CSS3让你的工作更有效率,不幸的是,目前只有Safari和Chrome支持这个新特性。

仅仅需要一行代码,不过它有4个不同的值:-webkit-box-shadow: 3px 5px 10px #ccc;

第一个3px是指定阴影与div元素之间的水平(横向)距离,第二个5px指的是阴影与div之间的垂直(纵向)距 离,第三个10px指的是阴影的模糊度(类似于photoshop中的羽化),值越大越细腻。最后的值不说大家也知道,就是阴影的颜色。

我们最终阴影效果代码:

1 #shadow {
2 background-color: #fff;
3 border: 1px solid #000;
4 -webkit-box-shadow: 3px 5px 10px #ccc;
5 }

正如你看到的,我们个这个div设置了白色的背景,黑色的边框和亮灰色的阴影。

调整大小

在最新版本的CSS中,调整元素的尺寸已经成为可能(不过目前仅Safari支持)。

使用这个代码以后,我们的元素的右下角会出现一个小三角以提示用户这个元素是可以调整尺寸的。代码依然很简单,可以说仅需要一行代码,当然你还可以配合使用 一些曾经使用过的属性,比如"max-width", "max-height", "min-width"和 "min-height"。

1 #resize {
2 background-color: #fff;
3 border: 1px solid #000;
4 resize: both;
5 overflow: auto;
6 }

在这里主要说一下resize和overflow属性,resize:both;的意思就是所有边都可以调整尺寸,它的值还有horizontal和vertical,顾名思义,就是横向和纵向。而overflow是为了配合resize工作的,在这里使用auto。

虽然现在仅有很少数的浏览器支持CSS3,但不可否认的是CSS3的确会为我们的工作节省更多的时间。如果你对渐 进增强有所了解和认识的话,我想你会欣然接受CSS3这个强大的新版本的。不要再把你的时间都花在IE6上了,那样你只能会是过时的前端开发工程师。

CSS3不遥远,几个特性你要知道的更多相关文章

  1. CSS3和H5的新特性

    H5的新特性 1.   用于绘画 canvas 元素. 2.   用于媒介回放的 video 和 audio 元素. 3.   本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不 ...

  2. 前端笔记之HTML5&CSS3(上)新特性&音频视频&本地存储&自定义属性

    一.HTML5简介 HTML 5 的第一份正式草案已于2008年1月22日公布.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 2014年10月29日,万维网联盟 ...

  3. HTML5和CSS3中的交互新特性

    当文章的标题是一副用photoshop制作的图片,那么势必在搜索引擎中无法搜索到.并且因为图片的体积不算小.可能在网速慢的的时候不得不耐心的等待图片的刷新. 所以.我们来谈谈有没有一种新的方法能够避免 ...

  4. CSS3新增了哪些新特性

    一.是什么 css,即层叠样式表(Cascading Style Sheets)的简称,是一种标记语言,由浏览器解释执行用来使页面变得更为美观 css3是css的最新标准,是向后兼容的,CSS1/2的 ...

  5. CSS3的新特性

    CSS3中增加的新特性: (1)选择器的种类 (2)字体 font (3)text-overflow (4)文本渲染 text-decoration (5)多列布局 column-count (6)R ...

  6. CSS3新增特性详解(二)

    上篇博文主要介绍了CSS3新增特性中的静态特性,比如新的选择器.多背景图.阴影.渐变等.本文主要介绍CSS3中新增的动态特性,如过度.动画.变形等. transitian:  -webkit-tran ...

  7. 奇妙的CSS之CSS3新特性总结

    随着CSS3标准的发布,越来越多的浏览器开始支持最新的CSS标准,虽然还有些新特性支持的不够完美,但相信未来的浏览器一定会完全支持CSS3的,毕竟这代表着大趋势!下面l列出来一些CSS3中出现的新特性 ...

  8. [转]深入了解 CSS3 新特性

    简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外 ...

  9. 【HTML5&CSS3进阶学习02】Header的实现·CSS中的布局

    前言 我们在手机上布局一般是这个样子的: 其中头部对整个mobile的设计至关重要,而且坑也很多: ① 一般来说整个header是以fixed布局,fixed这个产物在移动端来说本身坑就非常多 ② 在 ...

随机推荐

  1. MongoDB在单机上搭建分片副本集群(windows),版本二

    配置可以参考前面一篇 https://www.cnblogs.com/a-horse-mosaic/p/9284010.html 副本集是一组服务器,其中有一个主服务器(primary),用于处理客户 ...

  2. python 用装饰器写登录

    # 1.编写装饰器,为多个函数加上认证的功能(用户的账号密码来源于文件), # 要求登录成功一次,后续的函数都无需再输入用户名和密码 # FLAG = False # def login(func): ...

  3. UVa Problem 100 The 3n+1 problem (3n+1 问题)

    参考:https://blog.csdn.net/metaphysis/article/details/6431937 #include <iostream> #include <c ...

  4. C#的委托Delegate

    一.委托基础 1.什么是委托 委托(Delegate) 是存有对某个方法的引用的一种引用类型变量,用关键字delegate申明,实现相同返回值和参数的函数的动态调用,提供了对方法的抽象. 委托(Del ...

  5. 1176: [Balkan2007]Mokia

    1176: [Balkan2007]Mokia 链接 分析 三维偏序问题,CDQ分治论文题. 代码 #include<bits/stdc++.h> using namespace std; ...

  6. kafka监听类

    package com.datad.dream.service; import com.alibaba.fastjson.JSON; import com.datad.dream.dao.KafkaI ...

  7. Android中通过拨号调起应用的实现方式及特殊情况处理

    Android中有时我们会有这样的需求:通过拨号调起我们的程序.这个需求如何实现呢? 思路当然是在我们的应用中实现一个广播接收器(BroadcastReceiver),对打电话时系统发出的广播进行拦截 ...

  8. jenkins手动安装插件

    插件下载地址: 搜索:https://plugins.jenkins.io/ 列表:https://updates.jenkins-ci.org/download/plugins/ 打开jenkins ...

  9. 【JS笔记】闭包

    首先看执行环境和作用域的概念.执行环境定义了变量或函数有权访问的其他数据,决定它们的行为,每个执行环境都有一个与其关联的变量对象,保存执行环境中定义的变量.当代码在一个环境中执行时,会创建变量对象的一 ...

  10. Django admin源码剖析

    单例模式 单例模式(Singleton Pattern)是一种常用的软件设计模式,该模式的主要目的是确保某一个类只有一个实例存在.当你希望在整个系统中,某个类只能出现一个实例时,单例对象就能派上用场. ...