Question

我正在试图弄清楚如何在深色背景上用css制作发光文字。这就是我所拥有的：

    .blackbox, .whitebox {
    	padding: 20px;
    	display: table;
    	border: 1px solid black;
    }
    .whitebox { 
    	background-color: white; 
    	color: black; 
    	text-shadow: 0 0 5px #000;
    }
    .blackbox { 
    	background-color: black; 
    	color: white; 
    	text-shadow: 0 0 5px #fff;
    }

    <div class="whitebox">
    Hi there.
    </div>
    
    <div class="blackbox">
    Hi there.
    </div>

白框中的黑色文字显示我定义为黑色的发光，但黑框中的白色文字显示为什么。我做错了什么？

Answer 1

Text shadow属性参数如下

text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

h-shadow和v-shadow是水平和垂直距离。你需要调整它以获得正确的阴影。请看下面的代码段。

<html>

<head>
    <style>
        .blackbox,
        .whitebox {
            padding: 20px;
            display: table;
            border: 1px solid black;
        }
        
        .whitebox {
            background-color: white;
            color: black;
            text-shadow: 0 0 5px #000;
        }
        
        .blackbox {
            background-color: black;
            color: white;
            text-shadow: 8px 8px 5px #fff
        }
    </style>
</head>

<body>
    <div class="whitebox">
        Hi there.
    </div>

    <div class="blackbox">
        Hi there.
    </div>
</body>

</html>

白色和黑色阴影以相同的强度显示。但是我们的眼睛对黑影而不是白影更敏感。尝试更改h-shadow和v-shadow属性

Answer 2

添加内容以封装

中的文本

.blackbox,
.whitebox {
  padding: 20px;
  display: table;
  border: 1px solid black;
}
.whitebox {
  background-color: white;
  color: black;
  text-shadow: 0 0 5px #000;
}
.blackbox {
  background-color: black;
}
.blackbox p {
  color: white;
  text-shadow: 0 0 5px #fff;
}

<div class="whitebox">
  Hi there.
</div>

<div class="blackbox">
  <p>Hi there.</p>
</div>

Answer 3

您可以通过添加多个文字阴影来执行此操作，如下面的代码段所示。为了带来炫酷效果，请在随后的阴影颜色中使用不同的霓虹色。

    .blackbox, .whitebox {
    	padding: 20px;
    	display: table;
    	border: 1px solid black;
    }
    .whitebox { 
    	background-color: white; 
    	color: black;
    	text-shadow: 0 0 5px #000;
    }
    .blackbox { 
    	background-color: black; 
    	color: white; 
    	text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff;
    }

<div class="whitebox">
  Hi there.
</div>

<div class="blackbox">
  <p>Hi there.</p>
</div>

希望这会有所帮助。欢呼声。

发光文本黑暗的背景

3 个答案: