今天结合了前面写的几个小提示框，这回继续完善了一下，所以接着show一下

最新推荐文章于 2024-08-20 22:40:33 发布

nelson

最新推荐文章于 2024-08-20 22:40:33 发布

阅读量299

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： button input class c 微软 div

本文链接：https://blog.youkuaiyun.com/Do_it__/article/details/5990132

CSS 专栏收录该内容

35 篇文章

订阅专栏

本文展示了一个HTML和CSS结合使用的示例，用于创建一个带有箭头指示的取消订单原因提示框。通过精心设计的CSS样式，实现了简洁美观的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html> <html> <head> <meta charset="gbk"> <title>First Grid Demo</title> <style>> body,button,input,select,textarea{ font:12px/1.5 '微软雅黑',Verdana,Tahoma,Arial,/5b8b/4f53;/*后面是宋体的编码*/ } body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0px; padding: 0px; } body{ padding:20px; } .cancel-reason{ position: absolute; border-top: 1px solid #D7C36C; border-bottom: 1px solid #D7C36C; } .cancel-reason .reason-detail{ position: relative; border-left: 1px solid #D7C36C; border-right: 1px solid #D7C36C; margin: 0px -1px; background-color: #FFFAD2; padding: 5px; width: 260px; } .reason-detail div{ background-color: #FFFFFF; padding:5px; } .cancel-reason span{ color: #808080; } .cancel-reason p{ /*text-indent: 5em; replace by margin-left: 5em for better */ margin:0px; padding:0px; margin-left: 5em; } i, s{ width: 0px; height: 0px; font-size: 0px; line-height: 0; overflow: hidden; border-width: 6px; /*for i change at s*/ position: absolute; border-color:transparent #D7C36C transparent transparent; border-style:dashed solid dashed dashed; left:-12px; top:12px; z-index: 30; } s{ border-width: 5px; border-right-color: #FFFAD2; left: -10px; top: 13px; z-index: 40; } </style> </head> <body> <div class="cancel-reason"> <div class="reason-detail"><div>取消原因：<span>买家取消</span><p>买家不想买了</p></div></div> <i></i> <s></s> </div> </body> </html>

demo实例：

取消原因：买家取消

买家不想买了

test