當(dāng)前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS自定义消息提示

發(fā)布時間：2023/12/2 CSS 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS自定义消息提示小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1.效果

2.源碼

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><style type="text/css">#confirm{position: absolute;z-index: 1;display: inline-block;border: 1px solid black;background-color: gray;width: 50px;height:40px;border-radius: 10px;-webkit-box-shadow: 3px 3px 3px #adadad;-moz-box-shadow: 3px 3px 3px #adadad;box-shadow: 3px 3px 3px #adadad;text-align: center;line-height: 40px;color: red;}#triangle{position: absolute;z-index: 2;top: 44px;left: 26px;display: inline-block;border-bottom:1px solid black;border-right:1px solid black;background-color: gray;width: 10px;height:10px;-webkit-transform: rotateZ(45deg);-moz-transform: rotateZ(45deg);-ms-transform: rotateZ(45deg);-o-transform: rotateZ(45deg);transform: rotateZ(45deg);-webkit-box-shadow: 3px 3px 3px #adadad;-moz-box-shadow: 3px 3px 3px #adadad;box-shadow: 3px 3px 3px #adadad;}</style> </head> <body> <div id="confirm">提示</div> <div id="triangle"></div> </body> </html>

總結(jié)

以上是生活随笔為你收集整理的CSS自定义消息提示的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。