了解如何使用css3快速轻松地添加辉光效果
在网页上的元素中添加一个柔和的外部辉光，可以使该元素在查看器中脱颖而出。使用CSS3和HTML在重要对象的外边缘周围应用光晕。该效果类似于在Photoshop中添加到对象的外部辉光。
创建要发光的元素
辉光效果适用于任何背景，但它们在黑暗背景下看起来最好，因为这样辉光看起来更闪烁。在圆角矩形框示例中，一个DIV元素放置在另一个具有黑色背景的DIV元素中。辉光不需要外部DIV，但在白色背景上很难看到辉光。
设置元素的大小和颜色
选择要用光晕装饰的元素后，向其添加样式，例如背景色、大小和字体。
这个例子是一个蓝色的矩形；大小设置为147像素乘以90像素；背景色设置为#1f5afe，一种皇家蓝。它包括将元素放置在黑色容器元素中间的余量。
拐弯
使用CSS3很容易创建圆角矩形。将“边界半径样式”特性添加到光晕类中。只需记住使用–webkit–和–moz–前缀即可实现最高的兼容性。
-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;添加带有长方体阴影的光晕
光晕本身是使用长方体阴影创建的。因为它会使整个元素产生光晕，而不会像阴影一样将辉光投射到一侧，所以请将水平和垂直长度设置为0px。
在本例中，模糊半径设置为15px，模糊扩散为5px，但您可以修改这些设置以确定希望光晕的宽度和漫反射程度。颜色rgb（255255190）为黄色，RGBa alpha透明度设置为75%RGBa（255255190，.75）。选择最适合您的项目的辉光颜色。与四舍五入一样，不要忘记使用浏览器前缀（–webkit–和–moz-）以获得最佳兼容性。
-webkit-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);-moz-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);- 发表于 2021-09-04 06:49
- 阅读 ( 194 )
- 分类：数学
你可能感兴趣的文章
10个免费的adobe photoshop插件，提供最佳创意套件
...个一键面板，或者你可以打开附带的独立应用程序，对你如何将预设应用到你的照片进行更精细的控制。 ...
7个未充分使用的microsoft word功能及其使用方法
...和选项经常没有得到充分利用。这里有七个常见的特性，如何使用它们，以及如何使它们为您工作。 ...
微软powerpoint入门指南：从新手到大师
... 幻灯片是幻灯片的基础。因此，了解如何有效地与他们合作的细节会对你的创作产生很大的影响。以下是使用PowerPoint幻灯片时应了解的基本知识。 ...
4个很酷的插画效果，你可以用来制作有趣的壁纸
... 你可能想知道如何在壁纸设计中使用它。好吧，你可以用这个效果在对象和文本上创建一个发光效果。当然，也有外部/内部辉光效果，但这种方法创建了一个更自然的最终产品。 ...
如何将luminar ai与photoshop结合使用以获得更好的人像
... 在本教程中，我们将向您展示如何使用Luminar AI作为Photoshop的插件来更改现有的、完全编辑的肖像。但是如果你没有Photoshop也不用担心。Luminar AI是一个独立的程序，不需要任何其他照片编辑软件。 ...
使用photoshop中的nik插件可以应用10个惊人的效果
... 相关：如何在Photoshop中使用Silver-Efex-Pro转换黑白图像 ...
5个有用的图像编辑，你可以在油漆.net
... 我们已经了解了油漆.NET任何人都可以用来改善他们的形象。不管你是想模糊屏幕截图还是对家庭照片做些小调整，油漆.NET是一个伟大的方式，使这些变化，而不需要成为一个摄影...
了解如何使用adobe为web和移动设备创建出色的设计
...织视频片段、学习颜色分级等。 如果你不了解HTML5和CSS3的基本知识，你将学习如何从头开始创建一个响应式网站。 Adobe Photoshop CC课程：关于如何从头开始使用Adobe Photoshop的完整课程。它包括用Photosho...
如何突出显示powerpoint演示文稿中的文本
突出显示文本会引起注意。如果您订阅了Office 365，则可以直接在PowerPoint中突出显示文本。如果您使用的是桌面版的PowerPoint，则需要使用变通方法。我们会告诉你两种方法。 在powerpoint中突出显示文本（office 365订阅服务器） ...
如何从linux终端快速调整、转换和修改图像
...k感兴趣，请查看ImageMagick网站上的官方文档，以更深入地了解ImageMagick。
0 篇文章
