說話泡泡,是現在很多網站和應用中都運用的一種獨特的設計風格。它可以在一個界面上表示出對話或者信息的雙向交流,讓用戶能夠更加清晰的看到對話者的身份和內容。
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寫出說話泡泡常常是應用中常見的一種場景,而在實現的時候,我們可以根據具體的場景選擇合適的方法來完成。讓我們的應用更加豐富多樣,更清晰的展現我們要傳達的信息。
上一篇html2表單代碼
下一篇jquery jkit