了解如何使用CSS3快速轻松地添加发光效果

将重点添加到网页元素以强调

添加到网页元素上的柔和的外部辉光会使元素突出显示给观众。 使用CSS3和HTML在重要对象的外部边缘上应用辉光。 效果类似于在Photoshop中添加到对象中的外部光晕。

首先创建发光元素

发光效果可以在任何颜色背景上完成,但是在黑暗背景下它们看起来最好,因为那样发光似乎更闪亮。 在这个圆角矩形框示例中,DIV元素被放置在另一个黑色背景的DIV元素中。 外部DIV对于发光来说不是必需的,但很难在白色背景上看到发光。

给DIV一发光:


设置元素的大小和颜色

选择要用辉光点缀的元素后,请继续添加所需的任何样式 ,例如背景颜色,大小和字体。 这个例子是一个蓝色的矩形; 大小设置为147px×90px; 并且背景颜色被设置为#1f5afe,一种皇家蓝色。 它包含一个将元素放置在黑色容器元素中间的边距。