CSS云狀提示框是一種常用于網頁設計中的提示框。它呈現出云朵形狀,并可以自定義樣式,為用戶提供友好、有效的提示信息。
.cloud-box { position: relative; width: 200px; height: auto; padding: 10px; background-color: #fff; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); border-radius: 10px; } .cloud-box:before { content: ""; position: absolute; top: -25px; right: 10px; border-style: solid; border-width: 0 15px 15px 15px; border-color: transparent transparent #fff transparent; }
以上代碼為云狀提示框的主要樣式。首先,在“cloud-box”類中定義了提示框的寬度、高度、內邊距、背景顏色、陰影和邊框半徑等屬性。
接著,在“cloud-box:before”中使用了偽元素“before”來創建了云朵形狀的箭頭,并定義了其位置、樣式和顏色等屬性。其中,“border-width”中的15px值可以根據需求進行調整,以便更改箭頭大小。
在使用時,只需將以上代碼添加到CSS樣式表中,并在HTML文檔中使用“cloud-box”類即可實現云狀提示框的效果。同時,也可以添加其他樣式屬性以美化提示框的外觀,如字體、顏色、對齊方式等。