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

正方形上邊框有個圓css

錢琪琛2年前8瀏覽0評論

在CSS中,我們可以很容易地為一個正方形添加邊框,同時也可以很容易地為邊框添加圓角。但是,如果我們想要在正方形的邊框上添加一個圓形呢?下面我們就來介紹一種方法,使用CSS給正方形上的邊框添加一個圓形。

.square{
width: 200px;
height: 200px;
border: 10px solid #333;
position: relative;
}
.square:before{
content: "";
position: absolute;
width: 20px;
height: 20px;
background: #333;
border-radius: 50%;
top: -15px;
left: -15px;
}
.square:after{
content: "";
position: absolute;
width: 20px;
height: 20px;
background: #333;
border-radius: 50%;
top: -15px;
right:-15px;
}

上面的代碼中,我們首先定義了一個寬高為200px的正方形,并設置了10px的邊框。接下來,我們用偽元素:before和:after來分別在正方形的左上角和右上角添加圓形。我們為這兩個元素設置了相同的寬高、背景顏色和圓角半徑,并且將它們的位置設置在邊框之外的位置,通過調整top和left或者top和right即可。

這樣,我們就成功地為正方形的邊框添加了圓形。如果需要使用其他顏色或大小,可以根據需要修改代碼中的各個屬性。