首页 相关文章 CSS3 有关的问题

CSS3 有关的问题

Eric A. Meyer 对基于 Web 标准的 CSS 与 HTML 绝非一知半解,他是这个领域杰出的专家,曾写过不少 CSS 方面的书,是 An Event Apart 的合伙创始人,A List Apart 团队成员,还是 Complex Spiral Consulting 的创始人。另外, Eric Meyer 7年来一直是 CSS Working Group 资格深获邀专家,他们负责维护和开发 CSS。



不用说,如果要找个人请教一些 CSS 方面的问题,Eric Meyer 就是那个人。本文作者日前向 Eric Meyer 提问了7个与 CSS3 有关的问题,以下是 Eric Meyer 对这些问题的解答。

你认为 CSS3 对 CSS 最令人振奋的扩展在哪里?

[Eric Meyer][ 查看全文 ]

2016-02-19 标签:

CSS3 有关的问题的相关文章

  •   最近闲来无事,上W3C转了一圈,粗略地浏览了一下尚未发布的CSS3,虽然还未被W3C正式发布出来,但还是能从已有的资料中窥出一些端倪,一个很明显的特征,CSS3制订得越来越细致了,某些细节之处完全超乎你所能想象的到的范围。 在这里不提及CSS3的语法,因为对于目前尚未有软件支持的CSS3,任何语法的探讨都像是空中楼阁,毫无意义可言。以下我就列举一下CSS3中部分新内容。 1、...[ 查看全文 ]
  • 说起CSS3的新特性,就不得不提到 Media Queries 。本文比较详细,所以很多实际中用不到。所以如果只是想简单了解Media Queries,推荐参考 CSS3 Media Queries 。 CSS2.1定义了 Media 的部分,包括类型、组别和规则等。CSS并非为了显示器而创造,而是应用于各种各样的媒体,比如常见的显示器,越来愈多的手持设备,可能略显过时的电视机等等。 而 Media Queries 的引入,其作用就是允许添加表达式用以确定媒...[ 查看全文 ]
  • 标签:Web开发
    阴影大约从CSS2就开始有了,但是只有Safari一个浏览器支持它,到现在依然是这样。阴影在CSS3中可以应用在边框和文字上,就像图片的阴影效果一样。 一般可以分为box-shadow和textshadow两类。 CSS3的box-shadow和textshadow可以写做:box-shadow:Apx Bpx Cpx #xxx; Apx = x轴 Bpx = y轴 Cpx = 投影长度 #XXX = 像通常一样的颜色 了解了这些,我们就可以以下面的方法开始体验了 浏览器兼容性: 在前面的介...[ 查看全文 ]
  • 标签:Web开发
    本文中的这些标志与图标都是用CSS3制作而成,看上去似乎很不可思议,其中包括了IE图标,网站图标,奥运会标志等等,都是一些十分常见的标志,而它们之所有如此特别是因为这些标志与图标只是用CSS3来显示在网页中,而并非图片显示。 尽管被批评为走火入魔,CSS3 痴迷者们仍然在尝试实现各种基于纯 CSS 的图形与图标设计,如果你看到本文介绍的这些精美图标,你绝对不会相信它们完全是由 CSS3 代码生成的。尤...[ 查看全文 ]
  • 所有的开发人员都应该注意了,你们绝对应该看看这篇文章,帮助你快速创建HTML5/CSS3的开发框架。可能你也看到过其它的框架,但是你应该看看这些框架,因为你以前可能没用过他们中的大部分。看看最新的实用HTML5和CSS3框架吧!希望你们喜欢! 1.HTML5boilerplate H5BP带给你非常漂亮的文档,一个网站优化的编译脚本,还有一个自定义的boilerplate编译器。除此之外,我们还支持lighttd,Google App Engine和No...[ 查看全文 ]
  • 标签:Web开发
    现在我们来看一看如何为边框的border-color添加更多的色彩。 使用CSS3的border-radius属性,如果你设置了border的宽度是X px,那么你就可以在这个border上使用X种颜色,每种颜色显示1px的宽度。如果说你的border的宽度是10个像素,但是只声明了5或6中颜 色,那么最后一个颜色将被添加到剩下的宽度。 浏览器兼容性 目前只有Firefox支持CSS3 border-colour属性,所以我们这里只需使用-moz前缀。 所有本系列...[ 查看全文 ]
  • 标签:Web开发
    一、中规中矩的效果 所谓中规中矩的效果就是加个投影,贴个胶带什么的。效果如下: 您可以狠狠地点击这里: 中规中矩纸张效果demo 这里纸张本身的效果没有什么说头的,就是个CSS3的 box-shadow投影 效果而已,相关代码如下: -moz-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2); 反而是上面的...[ 查看全文 ]
  • 标签:Web开发
    使用新的CSS3的”RGBA”声明,不仅仅让我们像通常一样设置RGB颜色,而且还可以设置其透明度。 RGBA像RGB一样设置颜色,而这个”A”——RGBA中的最后一个值——允许我们设置该元素的透明度。就像opacity声明一样,一个opacity值为1的元素是完全不透明的,而一个opacity为0的元素是完全透明的。 浏览器兼容性 RGBA现在在Firefox、Google Chrome和Safari中都有比较好的支持,同样不需要前缀。 CSS3 RGBA 色...[ 查看全文 ]
  • 用纯CSS也可以实现各种各样很酷的效果了,甚至是动画。虽然有些效果不能跨浏览器(甚至是支持CSS3的浏览器)运行,有些只是展示并没什么实际 用途, 但仅用CSS实现出的这些效果似乎没什么可以挑剔的。 对于设计人员和开发人员来说,CSS一直是web设计过程中重要的一部分,随着CSS3的出现以及越来越多的浏览器对它的支持,设计师们有了 更多的选择。用纯CSS也可以实现各种各样很酷的效果了,甚至是动画。虽然有...[ 查看全文 ]
  • 标签:Web开发
    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari(-webkit-)。 一、box-flex属性 box-flex主要让子容器针对父容器的宽度按一定规则...[ 查看全文 ]
  • 标签:Web开发
    英文原文: http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/ 中文翻译: http://www.dudo.org/article.asp?id=197 注: 本文写于2006年1月,当时IE7、IE8和Firefox3还未发行,文中所有说的浏览器支持均未包括这三个版本的浏览器。在IE8和Firefox3中,文中的大部分选择符已经被支持[dudo注] 在2005年的9月和10月,我先后发表了几篇关于CSS2.1中选择符的介绍文章。大体看来...[ 查看全文 ]
  • 渐变可以创建类似于彩虹的效果,低版本的浏览器不的不使开发者用图片来实现,CSS3将会轻松实现网页渐变效果。 要得上面的线性渐变效果,我们这样去定义CSS3样式: background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa); /* Firefox */background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1, #8f2c00)); /* Saf4+, Chrome */filter: prog...[ 查看全文 ]
  • 标签:Web开发
    在今天的课程中,我将向大家介绍如何使用css3创建3d的立方体。大家可以通过下面的链接浏览实际效果,操作上下左右键,实现立方体的翻转效果。 demo地址 :http://www.jb51.net/jiaoben/70022.html 下面我们开始介绍如何制作。 html : 代码如下: div id="experiment" div id="cube" div class="face one" One face /div div class="face two" Up, down, left, right /div div class="face ...[ 查看全文 ]
  • 1:基本标记 在我们开始这个教程之前,先来创建整个教程都要使用的基本标记。 我们的xHTML需要一下div元素: #round, 使用CSS3代码实现圆角. #indie, 应用个别的几个圆角. #opacity, 展示新的CSS3实现不透明度的方式. #shadow,展示不使用Photoshop的情况下,使用CSS3来实现阴影效果. #resize, 展示如何使用某种CSS来实现重设大小的效果. 综上所述,我们的xHTML应该是这样的:    !DOCTYP...[ 查看全文 ]
  • 标签:Web开发
    关于浏览器文字选中颜色 以我的系统举例(xp 默认主题),浏览器上页面文字选中后默认的背景色是一种蓝色, 不同浏览器的颜色有些许差异,但大致相同,文字颜色也近乎白色,如下图所示,截自Firefox3.6浏览器: 在CSS3的爸爸妈妈还没有相亲认识的时候,要改变页面上文字选中后的背景色以及文字颜色,就跟让太监生孩子一样困难。但是,随着CSS3呱呱落 地,获得越来越多的浏览器认可,一切又显得那么自然而然...[ 查看全文 ]
  • 标签:Web开发
    在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。不幸的是,仍然有不同的利弊,使各种技术都不太理想,但又无法不去用。真是进也难,退也难呀。 最近在学习em的相关知识的时候,无意之间让我拾得一宝,就是使用rem来设置Web页面的字体大小。让...[ 查看全文 ]
  • 标签:Web开发
    html5与css3小应用,感兴趣的话,可以点击下载,适合ie9+,ff,chrome等浏览器   [ 查看全文 ]
  • 对于设计人员和开发人员来说, CSS 一直是web设计过程中重要的一部分,随着 CSS3 的出现以及越来越多的浏览器对它的支持,设计师们有了更多的选择。现在,用纯CSS也可以实现各种各样很酷的效果了,甚至是动画。虽然有些效果不能跨浏览器(甚至是支持CSS3的浏览器)运行,有些只是展示并没什么实际用途, 但仅用CSS实现出这些效果也是一大进步。 这里有几个可以使用CSS3实现的常见网页设计应用,你可以马上动手...[ 查看全文 ]
  • 标签:Web开发
    页面中圆角的实现是个很头疼的问题,虽然现在有很多种实现方法,但是都是比较麻烦的。在本文中,让我们看看如何使用CSS3 border-radius来实现圆角DIV。   跨浏览器兼容性 就像在上一篇《CSS3系列教程:简介》中提到的,并不是所有的浏览器支持CSS3,但是那些比较好的浏览器选择兼容,而不是直接支持。我们有两个能使用的前缀。 前缀: -moz(例如 -moz-border-radius)用于Firefox -webkit(例如:-...[ 查看全文 ]
  • calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分。因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性能实现自适应的布局,首先让我想到的是box-sizing,但跟我说还可以计算,这让我不得不想起calc()。因为早先在官网和一些blog上看到相关的介绍,但一直没有深入,也没有自己去测试过。今天花了一下午的时间彻底学习了...[ 查看全文 ]
手机页面 收藏网站 回到头部