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

css寫說話泡泡

老白2年前10瀏覽0評論

說話泡泡,是現在很多網站和應用中都運用的一種獨特的設計風格。它可以在一個界面上表示出對話或者信息的雙向交流,讓用戶能夠更加清晰的看到對話者的身份和內容。

CSS中實現說話泡泡的方法主要有兩種:

// 第一種方法:使用偽類選擇器實現
.chat{
position: relative;
padding: 12px;
background-color: #F9F9F9;
border-radius: 5px;
margin-bottom: 10px;
}
.chat::before{
content: "";
position: absolute;
right: 100%;
top: 50%;
height: 0;
width: 0;
border: 15px solid transparent;
border-right-color: #F9F9F9;
border-left: 0;
margin-top: -15px;
}
.chat::after{
content: "";
position: absolute;
right: 100%;
top: 50%;
height: 0;
width: 0;
border: 15px solid transparent;
border-right-color: #FFFFFF;
border-left: 0;
margin-top: -15px;
margin-left: -1px;
}

其中.chat類是說話泡泡的父級容器,偽類選擇器::before和::after分別表示泡泡的左箭頭和內容部分,并使用border屬性設置箭頭的大小位置。

// 第二種方法:使用三角形實現
.balloon{
position: relative;
width: 400px;
padding: 10px;
background-color: #36C9C6;
color: #FFF;
text-align: center;
/*三角形位置*/
margin-left: auto;
margin-right: auto;
&:before{
content: "";
position: absolute;
display: block;
bottom: -20px;
left: 50%;
margin-left: -10px;
width: 0;
height: 0;
border-width: 10px 10px 0;
border-style: solid;
border-color: #36C9C6 transparent;
}
}

同樣,.balloon類是說話泡泡的父級容器,使用偽類選擇器:before實現箭頭的三角形形狀,并使用border-width、border-style、border-color屬性來設置樣式。

綜上所述,通過CSS寫出說話泡泡常常是應用中常見的一種場景,而在實現的時候,我們可以根據具體的場景選擇合適的方法來完成。讓我們的應用更加豐富多樣,更清晰的展現我們要傳達的信息。