如何加深html元素背景，同時防止邊緣突出

我想知道是否有可能在混合所有邊緣時變暗div。如何加深html元素背景，同時防止邊緣突出

下面的例子是一個嘗試，但我只能得到頂部和底部邊緣融合。是否有一些解決方案可以隱藏容器的左側和右側邊緣？添加第二個水平線性漸變看起來不起作用，而且也沒有徑向漸變。

body { 
 
    background: grey; 
 
} 
 

 
.block { 
 
    color: white; 
 
    text-align: center; 
 
    font-size: 3em; 
 
    margin: auto; 
 
    margin-top: 50px; 
 
    height: 100px; 
 
    width: 400px; 
 
    background: linear-gradient(to bottom, rgba(0,0,0,.01), rgba(0,0,0,.2) 20%, 
 
    rgba(0,0,0,.4) 50%, rgba(0,0,0,.2) 80%, rgba(0,0,0,.01) 100%); 
 
}

<div class='block'> 
 
    Hello World 
 
</div>

來源

2017-05-28 user4584963

沒有CSS方形漸變可用，所以第二個最好的選擇是最有可能的盒子陰影，這會爲你工作嗎？ https://jsfiddle.net/4xLamxxp/3/ – LGSon

@LGSon看起來很近。如果只是有一種方法可以隱藏清晰的邊緣並將它們混合起來。 – user4584963

您可以增加陰影並減少元素https://jsfiddle.net/4xLamxxp/4/ ...或者像這樣，陰影/背景上的不透明度https://jsfiddle.net/4xLamxxp/5/ – LGSon

我想我可以幫你。

首先，我會爲您提供一些有用的代碼，然後我將解釋它爲什麼起作用。這裏所說：

HTML

<body> 
    <div class='block'> 
     <div class='block2'> 
      Hello World 
     </div> 
    </div> 
</body>

CSS

* { 
    padding: 0; 
    margin: 0; 
} 

body { 
    background: grey; 
} 

.block { 
    color: white; 
    text-align: center; 
    font-size: 3em; 
    margin: auto; 
    margin-top: 50px; 
    height: 100px; 
    width: 100%; 
    background: linear-gradient(to bottom, rgba(0,0,0,.01), rgba(0,0,0,.2) 20%, 
    rgba(0,0,0,.4) 50%, rgba(0,0,0,.2) 80%, rgba(0,0,0,.01) 100%); 
} 

.block2 { 
    height: 100px; 
    width: 400px; 
    margin: auto; 
}

好吧，讓我來解釋！ :)

讓我們先看看你的HTML。你基本上包含了「Hello World」文本，因此無論你有什麼樣的背景都會被該容器的邊界所約束。

所以，如果你想讓你的漸變沒有邊框，那麼讓那個容器（div）擴展頁面的整個寬度。您仍然可以將文本保留在自己的容器中，只要您不給它任何背景顏色設置，就會顯示透明.... ooooo ... ahhhh！大聲笑！！！

你會注意到，在HTML中，我所做的只是在原來的「block」類div中放入一個div，並將其稱爲「block2」。我創建的「block2」div是我放置文本的地方。

好的，現在讓我們來談談CSS代碼。

我做了3個改變，而且非常簡單。在這裏，他們都是爲了：

變化1 - 在代碼的第一行，我把：

* { 
    margin: 0; 
    padding: 0; 
}

這只是爲了讓這個你沒有在任何奇怪的空間你的顯示器的外邊緣，或任何其他人的顯示器。這是一個非常有用的小代碼片段，它是一個「軟瀏覽器重置」。它只是通過將這些值重置爲無，爲您提供了一個公平的競技場，這樣您就有更好的機會讓您的創作在不同的瀏覽器上保持一致。

變化2 - 我下面的代碼添加在原來的CSS代碼：

.block { 
    width: 100%; 
}

所有這一切確實是DIV延伸到瀏覽器的寬度，這當然是在擺脫了邊框的雙方。我們告訴瀏覽器將它放在屏幕的整個寬度上，而不是400px的確定寬度。

更改3 - 我添加了一點樣式到我創建的新的div叫做「block2」。下面是代碼：

.block2 { 
    height: 100px; 
    width: 400px; 
    margin: auto; 
}

我只給它，你原來具有相同的測量，然後在「塊」的div的正中它（並由此屏幕，因爲div的寬度現在是100％），給它一個自動邊距。

我希望有幫助。對不起，解釋這麼久了！我只是想徹底，我喜歡幫助人們理解解決方案爲何如此。

來源

2017-05-28 02:24:12

我認爲我唯一的選擇就是像你展示的那樣擴展整個寬度的元素。 – user4584963

這是不容易的，但你可以嘗試調整徑向漸變（Ultimate CSS Gradient Generator）：

body { 
 
    background: grey; 
 
} 
 

 
.block { 
 
    color: white; 
 
    text-align: center; 
 
    font-size: 3em; 
 
    line-height: 3em; 
 
    margin: auto; 
 
    margin-top: 50px; 
 
    height: 3em; 
 
    width: 400px; 
 
    background: radial-gradient(ellipse at center, rgba(0,0,0,1) 41%,rgba(7,7,7,1) 42%,rgba(229,229,229,0) 75%); 
 
}

<div class='block'> 
 
    Hello World 
 
</div>

來源

2017-05-28 02:22:19 itacode

如何加深html元素背景，同時防止邊緣突出

回答

相關問題