html对话框有些效果无法显示,CSS实现对话框效果如何实现（代码）

本篇文章给大家带来的内容是关于CSS实现对话框效果如何实现(代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

CSS实现对话框效果

/*CSS实现对话框效果一*/

.test1{width:300px;height: 30px; padding:30px 20px; margin-left:100px; background: #eb7956; position:relative;}

.test1 p{ width:0; height:0; position:absolute;}

.test1 .bot{

border-width:20px;

border-style:solid;

border-color:#ffffff #eb7956 #eb7956 #ffffff;

left:-40px;

top:40px;

}

.test1 .top{

border-width:10px 20px;

border-style:solid;

border-color: transparent #ffffff #ffffff transparent ;

left:-40px;

top:60px;

}

/*CSS实现对话框效果二*/

.test2{width:300px; padding:30px 20px; border:5px solid #beceeb; position:relative; margin-top: 10px;}

.test2 p{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}

.test2 p.bot{

border-width:20px;

border-style:solid dashed dashed;

border-color:#beceeb transparent transparent;

left:80px;

bottom:-40px;

}

.test2 p.top{

border-width:20px;

border-style:solid dashed dashed;

border-color:#ffffff transparent transparent;

left:80px;

bottom:-33px;

}

/*CSS实现对话框效果三*/

.test3{width:300px; height: 30px; border-radius: 160px/45px; padding:30px 20px; margin-left:100px; background: #eb7956; position:relative; margin-top: 10px;}

.test3 p{ width:0; height:0; position:absolute;}

.test3 .bot{

border-width:20px;

border-style:solid;

border-color:transparent #eb7956 #eb7956 transparent;

left:-30px;

top:40px;

}

.test3 .top{

border-width:10px 20px;

border-style:solid;

border-color: transparent #ffffff #ffffff transparent ;

left:-30px;

top:60px;

}

CSS实现对话框效果一

CSS实现对话框效果e二

CSS实现对话框效果三

以上就是对CSS实现对话框效果如何实现(代码)的全部介绍，如果您想了解更多有关CSS视频教程，请关注PHP中文网。