鲜为人知的几个CSS特性

CSS并非是门过于复杂的语言,但是,即使你接触了多年的CSS,仍然可能遇到新的事物——从未使用过的属性,从未考虑过的值,从未深入了解的细节。在我学习的过程中,经常遇见新鲜的小花絮,所以有必要通过本文向大家分享其中的一些知识。然而并非所有东西都是有一定的价值,只是希望在未来的使用过程中有所帮助。

color属性不仅仅适用于文本

让我们从简单的开始入手,color属性可谓是所有css开发者不可能不使用的最常用属性之一,该属性定义的是元素的前景色,然而没有深入了解该属性的同学可能不知道,它并不仅仅定义文本(查看示例)。

注意CSS样式,我们在body元素上设置了color属性为”green”,影响到下述元素也随之变成绿色:

 

  • 没有设置图片的ALT文本的颜色;
  • 列表的标记不同类型的颜色
  • 水平线继承的颜色;

 

visibility属性可以设置为”collapse”

或许你已经使用visibility属性成千上万次,但通常大家都只将其设置为”visible“(默认)或”hidden“(隐藏元素,与”display:none”不同的是该属性会保留元素位置的空间),visibility还有个值为”collapse“,主要用于对表格内行、列等进行操作(查看示例)

如果你使用的Chrome浏览器,看上去并没有区别,其他浏览器如Firefox、Opera等,使用collapse时表现出与”display:none”类似,即会隐藏元素所占的位置空间,而hidden则仍会保留占位空间;

CSS3中background的高级特性

以往,background是5个背景属性的简写形式,即background-color、background-image、background-repeat、background-attachment、background-position。CSS3中新增了3种属性background-size、background-origin、background-clip。

 

  • background-size:规定背景图像的尺寸;
  • background-origin:规定背景图片的定位区域;
  • background-clip:规定背景的绘制区域;

 

 

.example {
  background: aquamarine url(img.png)
              no-repeat
              scroll
              center center / 50%
              content-box content-box;
}

庆幸的是各大主流浏览器都支持CSS3的background新增的属性,然而为了兼容以往的浏览器,建议设置一个折中的背景(查看示例)。

clip只能用于绝对定位

说到background-clip,顺便提下clip属性,该属性用于裁剪绝对定位的元素,即只能对”position:absolute”或”position:fixed”生效。

 

.example {
    position: absolute;
    clip: rect(110px, 160px, 170px, 60px);
}

垂直百分比取决于容器宽度

乍一听感觉很困惑,水平上的百分比受容器宽度影响这无可厚非,同样受容器宽度影响的还包括垂直方向的padding、margin属性中的百分比,而不是高度(查看示例)。

注意,垂直方向上有3个百分比属性,分别是margin-bottom、padding-top、padding-bottom,当仅仅改变容器的宽度时候,这3个属性也会相应的改变。

border恰似盗梦空间

border是最常用的属性之一,它是border-width、border-style、border-color三个属性的缩写,大部分情况下我们只需要如下的代码:

 

.example {
  border: solid 1px black;
}

 

别忘了,这三个独立属性又是4个边框属性(上下左右)的缩写:

 

.example {
  border-width: 2px 5px 1px 0;
}

 

一层套一层,于是又衍生出地三层属性如border-left-style等,所以我们可以根据实际需求打造出更加绚丽的边框(查看示例)。

顺便提一下,border-width属性除了像素,还可以设置为”medium, thin, thick”。

text-decoration现在也是缩写形式

很多情况下,我们多半使用的”text-decoration:none”或”text-decoration:underline”,而不知道该属性是text-decoration-line、text-decoration-color、text-decoration-style三个属性的缩写。

 

a {
  text-decoration: overline aqua wavy;
}

遗憾的是,目前只有FireFox浏览器支持该缩写模式(查看示例),示例中我们使用的火狐浏览器前缀属性,因为目前其他浏览器还不能处理缩写形式。

 

border-image为何无人使用

border-image是CSS3中新的属性,并且被大多数主流浏览器支持(IE10及以下不支持),用来使用图像设置元素的边框,可惜的是现在很少有人使用它(查看示例)。