我正在嘗試向我的標題添加徑向漸變背景。我正在使用徑向漸變向標題底部添加曲線效果。我想要一種效果，從頂部到標題的顏色較淺，容器越往下越暗。目前，我的標題有我想要的曲線，但顯示的顏色是 1 純色而不是淡入淡出。
我可以使用徑向漸變實作這種外觀嗎？
所需外觀的照片：
CSS 代碼片段：
<html>
<head>
<style>
#container {
height: 200px;
width: 400px;
background: radial-gradient(100% 95% at top,#E8F3F9 100%,#0000 );
border: 1px dotted wheat;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>我試圖為背景 CSS#fefefe的at top一部分添加較淺的十六進制顏色，但最終將整個標題 1 顏色。
background: radial-gradient(#fefefe 100% 95% at top,#E8F3F9 100%,#0000 );
uj5u.com熱心網友回復：
將漸變移動到蒙版，然后使用另一個作為背景：
#container {
height: 200px;
width: 400px;
-webkit-mask: radial-gradient(100% 95% at top, #000 100%, #0000);
mask: radial-gradient(100% 95% at top, #000 100%, #0000);
background: linear-gradient(#0000,#E8F3F9);
}<div id="container"></div>uj5u.com熱心網友回復：
基本上，您正在嘗試使用漸變創建一條硬線。在這里你可以找到漸變的一些用途，包括使用 CSS 漸變的硬線。
要創建一條硬線，您必須為兩種顏色定義相同的位置。
在這種情況下，它看起來像下面的代碼。
<html>
<head>
<style>
#container {
height: 200px;
width: 400px;
background: radial-gradient(100% 95% at top,#ffffff 5%, #E8F3F9 100%,#ffffff 100% );
border: 1px dotted wheat;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>其中#E8F3F9和#ffffff處于 100% 的位置。
我添加#ffffff 5%了創建頂光效果。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/377811.html
上一篇：顯示/隱藏密碼如何解決這個問題？
下一篇：HTML不訪問CSS外部檔案