CSS自定义消息提示
生活随笔
收集整理的這篇文章主要介紹了
CSS自定义消息提示
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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>總結
以上是生活随笔為你收集整理的CSS自定义消息提示的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： scss的使用方式（环境搭建）
- 下一篇： CSS画各种二维图形