欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

css畫九宮格

張吉惟2年前9瀏覽0評論

九宮格可以用CSS進行繪制,需要使用到CSS中的“偽元素”以及“box-sizing”屬性。下面是九宮格的樣式代碼。

.container {
width: 300px;
height: 300px;
border: 5px solid black;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
}
.container::before {
content: '';
width: 33.3%;
height: 100%;
border-right: 5px solid black;
position: absolute;
left: 100px;
}
.container::after {
content: '';
width: 100%;
height: 33.3%;
border-bottom: 5px solid black;
position: absolute;
top: 100px;
}
.cell {
width: 33.3%;
height: 33.3%;
border: 5px solid black;
box-sizing: border-box;
}

上述代碼中,容器(.container)是九宮格的外層包裹,使用flex布局,flex-wrap屬性設置為wrap,讓元素能夠自動換行。在容器上方和左側分別使用偽元素:before和:after,分別繪制垂直和水平分割線。每個小格子使用.cell樣式進行設置,寬度和高度都為33.3%,整個九宮格就被平均分成了九個小格子。

使用上述代碼即可繪制出一個簡單的九宮格,可根據需求進行樣式的調整,如改變邊框顏色、格子大小等。