CSS3

那些CSS的细节问题(4) —— 圆角边框和outline

能写文章,说明时间略有空余,这应该算好事吧~看了下草稿箱,果断还是选这篇先写完,因为和前面的几篇有关联。在之前的 圆角响应区 以及 圆角边框和overflow 中,已经讨论过圆角边框的一些问题,本篇如题,是关于圆角边框和 outline 的,这里也正好回答了一丝在圆角响应区里提出的“为什么不在做DEMO的时候用 outline 描画边缘?”的问题。在写那篇之前做DEMO的时候,我是用了 outline 的,但注意到 outline 的一些问题之后,又把它从DEMO里移除了,并起草了这篇文章的标题,…

那些CSS的细节问题(3) —— 圆角边框和overflow

本篇是上篇《那些CSS的细节问题(2) —— 圆角响应区》的一个简短的延续,因为在上篇的篇幅里实在已经容不下更多混乱的部分。 尽管现在圆角边框的教材已经烂了大街到处都是,并且这个属性已经是诸多CSS3属性里应用最为广泛的特性之一,但却丝毫无法掩盖这个属性一路走来的坎坷。时至今日,现代浏览器对圆角边框的解释仍然存在诸多问题,比如上篇那些CSS的细节问题(2) —— 圆角响应区 讲到的对“响应区”影响的问题,实则也只是这个属性一路而来的问题之一而已。因为,单看一个属性确实很明了——无论是定义还是实际实现起来,然而,一旦这个属性和其他属性作用在一起,事情就没这么简单了。 下文中的内容,皆以如下版本的浏览器为基准:Chrome-24,IE-9,Firefox-18,Opera-12.…

那些CSS的细节问题(2) —— 圆角响应区

之前《那些CSS/JavaScript的细节问题》我都是凑足3个再开始写,现在发觉,很多时候要凑出3个古里古怪的问题还真不是件易事~ 有的时候想到要写一个问题,想等凑多些再写,但又总是一直拖着,好端端的讨论话题都过期了。更糟糕的是,往往好不容易凑足了数量,结果之前要写的东西居然又模糊不清了...以后,在一定时间里凑不出数量的话,也只好先写起来再说:) 所以今天,就只有一个问题,关于边框圆角:圆角边框是否影响元素的响应区域? 想象一下,一个 div 通常被我们认知为一个盒子(box),现在在它的周围有一个圆角边框,那么在这个矩形盒子的四个角上,必然会出现一些空隙(特别是当这个圆角矩形变成一个圆时候)。那么对于这个元素而言,…

响应式Web设计

响应式Web设计(Responsive Web Design – RWD)一般是指那些使用CSS3 Media Query特性制作站点,其可以适应不同视窗尺寸的布局。 虽然很早就已经有了类似RWD的概念,但直到最近一年里才开始变得特别流行,各种文章、例子、工具、模板,不断地从无到有,诸如: 响应式Web设计50个例子和最佳实践 21个响应式Web设计工具 响应式Web设计的模板和框架 这些资源,仿佛都是一下子冒出来似的…这要归功于IE9的发布,从而使得主流浏览器上升到全部支持Media Query的程度。 然而眼花缭乱的资料堆里,可供细细品读的资料其实也就那么几篇:ETHAN MARCOTTE 的…

CSS3 box-shadow 详解(2)

人一旦被一些繁杂的事消耗掉精力的话,即使有时间静下心来写篇东西也变得那么的不易啊,呵呵。题外话就不多说了,真没想到这篇早就构思好的东西写了这么久... 阅读本文请使用chrome,Opera或者FireFox浏览(23 December 2013: 由于迁移到ghost,其早期版本对HTML的支持不够理想,所以迁移过程中将所有HTML例子切成了图片) 在上一篇的CSS3 box-shadow 详解(1)里,我从标准的角度出发,详细地写到了box-shadow的标准的方方面面。但毕竟是游戏规则似的细节,读起来恐怕还是没什么味道,按照上次的安排,这篇里不再牵扯标准的任何细节性的东西,主要就是讲实际应用中,box-shadow能做些什么。 设计中的阴影 对于设计来说,阴影的重要性和颜色等同。视觉要表达的是“…

CSS3 box-shadow 详解(1)

这段时间确实比较繁忙,所以博客一直都没什么产出:) 前段时间看到一篇《9个你现在可以使用的CSS3属性( 9 CSS3 Properties You Can Use Now)》,描述了当前可以渐进使用的CSS3的新的属性。但实际上由于种种原因,当前能使用的其实远达不到9个这么多。 本文讨论的就是其中之一,box-shadow,而且是从比较细节的角度。既然是详解就必然要写的详尽,于是,写到一半的时候才发觉内容太多,所以就分成了2个章节。这个章节里讨论box-shadow标准的描述,所以你能知道一些非常细节的东西,当然这些东西都没法使用,所以如果你只是想了解怎么使用box-shadow,请跳过这一章,直接阅读我写的《CSS3 box-shadow 详解(…