好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

现代网页设计必不可少的CSS3功能_html/css_WEB-ITnose

在过去几年,CSS 的发展是很多 Web 设计者和开发人员未能想到的。CSS3 引入了新的功能,如 border-radius , box-shadow , text-shadow , text-overflow , multiple-background , transition , flexbox 、 animation 以及媒体查询等。

然而,CSS 仍继续在改善——尽管仍有一些不知名的属性。 CSS 变得更加有效率,并更接近于我们使用 JavaScript 和其他 Web 编程语言想要实现的功能。

在这篇文章之中,我们会介绍一些现代网页设计必不可少的一些 CSS3 的功能。

多背景

CSS3 允许你使用一个简单的逗号分隔列表,将多个背景应用于某个元素上。这时背景就会堆叠成层,第一个背景位于顶端,最后一个背景处于底部。 注意 只有列表中的最后一个背景色可以显示出来。

这里有一个基础的示例:

从上面的例子中可以看出,三个背景已经堆叠。同时为了控制图片的显示,这里又应用了其它的背景属性,如 background-repeat 和 background-position 。

Background-Clip

你还记得当年你使用 Photoshop 创建基于图片的文本的日子吗?自从具有相同功能的CSS3 background-clip 新属性的出现,Photoshop 正慢慢淡出人们的视线。

现在你可以使用 background-clip 属性来剪切基于图片的文本。首先,你需要把图片的 div 元素放置在 h1 或你想要剪切的文本元素上。现在你就可以使用 background-clip 属性剪切基于文本的图片。请确保 text-fill-color 属性为 transparent 。

下面的示例展示了 background-clip 属性的工作原理:

CSS 3D 变换

使用 CSS3,你可以创建一个假想的 3D 空间。这时元素需要一个视角才可以激活 3D 空间。有两种方式可以实现激活:使用 transform 属性和 perspective 属性值。

transform: perspective(600px); 

或者只是使用 perspective 属性:

perspective: 600px; 

效果的实现是由你给定的值来确定的。值越小,越接近于 三维空间的 Z 平面。事实证明,示例效果最具有说服力。下面的程序演示了你如何使用 transform 属性来实现 3D 效果:

计算值

我最喜欢的 CSS3 功能之一就是,使用 calc() 函数计算元素的值。就像一个计算器,它可以执行简单的数学计算,如大小、 角度或频率。

请看下面的代码,观察其工作原理。

HTML:

This is the text inside the container!

查看更多关于现代网页设计必不可少的CSS3功能_html/css_WEB-ITnose的详细内容...

  阅读:34次