我需要完全像這樣制作文本
這意味著邊框應該在文本后面。我嘗試了很多東西，整天都在網上搜索。
如果你現在怎么樣，請幫幫我）
uj5u.com熱心網友回復：
以下內容希望能滿足您的需求：
*{
margin: 0;
font-family: Arial, sans-serif;
}
.container {
display: relative;
}
.behind {
height: .75rem;
width: 100%;
position: absolute;
z-index: -1;
top: 1.4rem;
border-radius: .375rem;
background-image: linear-gradient(to right, rgb(201, 157, 201), rgb(110, 202, 224));
}
.container h1 {
position: absolute;
}<div class="container">
<h1>Stack Overflow
<div class="behind"></div>
</h1>
</div>uj5u.com熱心網友回復：
好吧，您可以使用另一個 div 并使用 z-index 屬性使其回傳文本。
uj5u.com熱心網友回復：
試試這個代碼并改變你想要的：
<html>
<head>
<style>
div{
background-color:#a65cdb;
text-align:center;
font-family:sans-serif;
padding:5px 10px 0 10px;
color:white;
font-size:3rem;
font-weight:600;
z-index:0;
}
span{
background-color:white;
z-index:1;
padding:12px;
position:relative;
display:block;
border-radius:10px;
opacity:50%;
top:-22px;
margin-bottom:0;
</style>
</head>
<body>
<div>
LEADERBOARD<span></span>
</div>
</body>
</html>
uj5u.com熱心網友回復：
不幸的是，我現在才看到你的問題。可惜為時已晚。而且也有解決辦法。我會做類似的但沒有嵌套。我更喜歡更少的嵌套，因為它更容易閱讀。那將是我的方式：
body {
background-image: linear-gradient(to right, rgb(147,112,219), rgb(153,50,204));
height:100vh;
margin: 0;
font-family: Arial, sans-serif;
}
.container {
display: relative;
text-align: center;
}
.container .title {
font-size: 50px;
font-weight: bold;
color: white;
}
.underline {
height: 1.15rem;
width: 410px;
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
top: 2.3rem;
border-radius: .375rem;
background-color:white;
opacity: 30%;
}<body>
<div class="container">
<div class="title">LEADERBOARD</div>
<div class="underline"></div>
</div>
</body>uj5u.com熱心網友回復：
這是我使用 (p) 元素來存盤文本和 (::after) 元素來創建行的解決方案。
.container {
display: inline-block;
background: linear-gradient(to right, #826CDC, #A45DD5);
position: relative;
}
.text {
position: relative;
text-align: center;
margin: 16px 20px;
text-transform: uppercase;
font-size: 60px;
color: white;
font-weight: 700;
padding: 0 30px;
}
.text::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
border-radius: 50px;
background: #ffffff;
opacity: 0.5;
height: 30px;
width: 100%;
}<div class="container">
<p class="text">Leaderboard</p>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/367773.html