CSS信息框是網頁設計中常用的一種元素。如果您希望在信息框的下方加上一個小尾巴,可以使用以下方法實現:
.info-box { position: relative; display: inline-block; padding: 10px; background-color: #fff; border: 1px solid #999; } .info-box:after { content: ""; position: absolute; bottom: -10px; left: 50%; margin-left: -10px; border-width: 10px; border-style: solid; border-color: transparent transparent #999 transparent; }
這里使用了偽類選擇器:after
來在信息框元素的下方添加一個三角形的小尾巴。在CSS樣式表中,我們設置了生成的偽元素:after
的content
屬性為空,這樣就不會影響信息框的內容。然后,我們設置了偽元素的position
屬性為絕對定位,bottom
、left
屬性分別表示偽元素的下邊緣與信息框底部對齊,并使偽元素的左側與信息框的水平中心對齊。接著,使用margin-left
屬性將偽元素向左移動半個寬度,也就是讓三角形的中心點與信息框的水平中心對齊。最后,我們設置了偽元素的border
屬性為10個像素,造成三角形的效果。上例中,transparent
表示透明邊框。
上一篇css修改上傳文件樣式
下一篇css修復加神仙水