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

css實現泡泡透明效果

錢瀠龍2年前13瀏覽0評論

CSS是Web開發中重要的一種技術,可以實現很多樣式效果,其中包括泡泡透明效果。接下來我們來了解一下如何使用CSS實現這樣的效果。

.bubble{
position: relative;
display: inline-block;
width: 100px;
height: 100px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0px 0px 20px rgba(0, 0, 0, .5);
}
.bubble::after{
content: "";
position: absolute;
top: 5px;
left: 5px;
width: 90px;
height: 90px;
border-radius: 50%;
background-color: rgba(255, 255, 255, .5);
z-index: -1;
}

上面的代碼使用了偽元素::after來實現泡泡透明的效果。主要是利用了偽元素在本身元素之上的特點,設置其內部背景透明度為0.5,從而實現泡泡透明的效果。另外,設置content屬性為空,是為了觸發偽元素。

在使用泡泡透明效果時,需要注意的是,必須先給泡泡設置一個白色的背景,否則設置rgba背景色無法達到透明的效果。