我不擅長CSS，我只想只刪除框內(nèi)的邊緣，只留下外邊緣。.grid-container {? display: grid;? grid-template-columns: auto auto auto;? background-color: #2196F3;? padding: 10px;}.grid-item {? background-color: rgba(255, 255, 255, 0.8);? border: 1px solid rgba(0, 0, 0, 0.8);? padding: 20px;? font-size: 30px;? text-align: center;}<h1>Grid Elements</h1><p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p><p>Direct child element(s) of the grid container automatically becomes grid items.</p><div class="grid-container">? <div class="grid-item">1</div>? <div class="grid-item">2</div>? <div class="grid-item">3</div>? <div class="grid-item">4</div>? <div class="grid-item">5</div>? <div class="grid-item">6</div>? <div class="grid-item">7</div>? <div class="grid-item">8</div>? <div class="grid-item">9</div></div>
3 回答
富國滬深
TA貢獻1790條經(jīng)驗 獲得超9個贊
您可以通過以下方法來實現(xiàn)此目的：刪除網(wǎng)格項上的邊框并使用容器上的大綱屬性：
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
outline: 1px solid black;
outline-offset: -10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
<h1>Grid Elements</h1>
<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>
<p>Direct child element(s) of the grid container automatically becomes grid items.</p>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
楊__羊羊
TA貢獻1943條經(jīng)驗 獲得超7個贊
這是你想要的？
為此，您只需創(chuàng)建一個帶邊框的容器框。
.grid-container {
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
.container {
border: 1px solid rgba(0, 0, 0, 0.8);
grid-template-columns: auto auto auto;
display: grid;
}
<h1>Grid Elements</h1>
<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>
<p>Direct child element(s) of the grid container automatically becomes grid items.</p>
<div class="grid-container">
<div class="container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</div>
拉丁的傳說
TA貢獻1789條經(jīng)驗 獲得超8個贊
您還可以像這樣更改您的代碼：
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 0;
border: 1px solid rgba(0, 0, 0, 0.8);
box-shadow: 0 0 0 10px #2196F3;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
<h1>Grid Elements</h1>
<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>
<p>Direct child element(s) of the grid container automatically becomes grid items.</p>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
- 3 回答
- 0 關(guān)注
- 157 瀏覽
添加回答
舉報
0/150
提交
取消