CSS3 + HTML5 实现未来 Web 设计
来源:菠菜博 发布时间:2010-01-25 12:17:00
CSS3 + HTML5是未来的Web,它们都还没有正式到来,虽然不少浏览器已经开始对它们提供部分支持。本文介绍了5个CSS3技巧,可以帮你实现未来的Web,不过,这些技术不应该用在正式的客户项目,它们更适合你的个人博客站点,Web 设计社区,或者不会有客户向你投诉的场合。
1. 圆角效果
CSS3 新功能中最常用的一项是圆角效果,标准 HTML 方块对象是90度方角的,CSS3 可以帮你实现圆角。
-moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;
甚至单个角也可以实现圆角,不过 Mozilla 和 Webkit 的语法稍有不同:
-moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-top-right-radius: 20px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px;
所支持的浏览器:Firefox, Safari , Chrome
用例: Twitter.
请参阅:
2. 图形化边界
顾名思义,图形化边界就是允许使用图片作为对象的边界,语法如下:
border: 5px solid #cccccc; -webkit-border-image: url(/images/border-image.png) 5 repeat; -moz-border-image: url(/images/border-image.png) 5 repeat; border-image: url(/images/border-image.png) 5 repeat;
这里,border: 5px 设定了边界的宽度,然后,每个边界的图片定义告诉浏览器,使用图片的多大一部分来充当边界。边界图片还可以针对每一条边单独设置:
border-bottom-right-image border-bottom-image border-bottom-left-image border-left-image border-top-left-image border-top-image border-top-right-image border-right-image
支持的浏览器: Firefox 3.1, Safari , Chrome.
用例: Blog.SpoonGraphics.
请参考:
猜你喜欢
- 我在网站上设置了邮件列表功能,实现用户自动订阅和发送,但很多用户输入和提交的邮件地址格式都是无效的,无法处理。请问如何解决这一问题?&nbs
- 在上一篇《服务器XMLHTTP(Server XMLHTTP in ASP)基础》中我介绍了一下ServerX
- 学习自然语言的最好方法就是溶入相应的语言环境在交流中学习,学习一种编程语言的最好方法就是看例程。为了帮助大家建立wml应用的第一印象,所以请
- 八种获取当前日期的js代码,第一步:把如下代码加入<head>区域中:<SCRIPT language=java
- 几个利用背景结合a:hover做的小东东,希望对大家有所帮助。<!DOCTYPE html PUBLIC "-//W3C//
- 代码如下:<% function CheckFileContent(FileName) dim 
- 很多人都使用很多的编程工具,尤其对于Web开发人员。这个小教程将告诉各位如何使DreamweaverMX编程环境适合中国的Web开发人员。一
- 国外有很多优秀的文章可以用来学习,我决定花些时间翻译。我并不知道这篇文章有没有人翻译过,原文名 10 Awful IE Bugs and F
- 尝试安装server[justin@xen20-vm04 "]$ rpm -ivh MySQL-server-5.1.51-1.g
- 本文作为属性篇的最后一篇文章, 将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin
- 如何干预执行计划 - - 使用hints提示基于代价的优化器是很聪明的,在绝大多数情况下它会选择正确的优化器,减轻了DBA的负担。但有时它也
- 这个问题对于规模稍微大些的项目而言,显得尤其重要了,数据库中如果有几百个存储过程, 难道还一个个找不成,即使自己很了解业务和系统,时间长了,
- 购物车的设计目标 从程序员的观点来看,购物车是维护购物者商品选购、允许察看、允许修改的一个对象。购物车本身是一个非常简单的程序,但开发者要考
- 同伪类的方式类似,伪元素通过对插人到文档中的虚构元素进行触发,从而达到某种效果。在CSS1里,有两个伪元素,即:first-letter和f
- 我来讲解属性部分, 这是相当有用的, 可要认真上课.首先,jquery中对html标签属性进行操作的关键词是 attr .没错,就4个字母,
- asp中fso怎样判断一个盘上是否有文件,实例代码,需要的朋友可以试试:<% dim objfolder dim
- 注:文中未表明的地方output 输出都是基于IE6.0,其中表明FF的地方为Mozilla Firefox2.0,还要注意文中的大小写ja
- 在一些情况下,MySQL可以直接使用索引来满足一个 ORDER BY 或 GROUP BY 子句而无需做额外的排序。尽管 ORDER BY
- MySQL支持大量的列类型,它可以被分为3类:数字类型、日期和时间类型以及字符串(字符)类型。本节首先给出可用类型的一个概述,并且总结每个列
- 很久没写blog,太忙了。没什么时间写复杂的东西,重新把颜色渐变效果写一遍。关于颜色的效果一般就两个,颜色梯度变化和样式的颜色渐变,前者在i