色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css實現(xiàn)小亮點

黃文隆2年前15瀏覽0評論

使用CSS實現(xiàn)小亮點其實非常簡單,只需要使用偽元素:after或:before即可。比如下面這段代碼:

.highlight {
position: relative;
}
.highlight:after {
content: "";
position: absolute;
top: 50%;
right: 0;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: yellow;
transform: translate(-50%, -50%);
}

這個代碼塊就是在一個類名為highlight的元素后添加了一個偽元素after,用來實現(xiàn)小亮點。下面我們依次解釋每一行的CSS代碼:

1、position: relative; 表示設(shè)置highlight的position屬性為相對定位,這是為了后面的絕對定位做鋪墊。

2、content: ""; 表示設(shè)置偽元素的內(nèi)容為空。

3、position: absolute; 表示設(shè)置偽元素的position屬性為絕對定位,這是為了相對于highlight定位。

4、top: 50%; 表示設(shè)置偽元素相對于highlight元素頂部的位置為50%。

5、right: 0; 表示設(shè)置偽元素相對于highlight元素右側(cè)的位置為0。

6、width: 10px; height: 10px; 表示設(shè)置偽元素的寬度和高度為10px。

7、border-radius: 50%; 表示設(shè)置偽元素為圓形。

8、background-color: yellow; 表示設(shè)置偽元素的背景顏色為黃色(可以根據(jù)需要自行更改)。

9、transform: translate(-50%, -50%); 表示在中心對齊偽元素。

最后我們在HTML中給需要加亮點的元素添加類名highlight即可。