Rumah >hujung hadapan web >tutorial css >CSS实现对话框效果如何实现（代码）
CSS实现对话框效果如何实现（代码）
- 云罗郡主ke hadapan
- 2018-10-19 15:15:542298semak imbas
本篇文章给大家带来的内容是关于CSS实现对话框效果如何实现（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS实现对话框效果</title>
<style>
/*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;
}
</style>
</head>
<body>
<p class="test1">
<p class="bot"> </p>
<p class="top"> </p>
CSS实现对话框效果一
</p>
<p class="test2">
<p class="bot"></p>
<p class="top"></p>
CSS实现对话框效果e二
</p>
<p class="test3">
<p class="bot"> </p>
<p class="top"> </p>
CSS实现对话框效果三
</p>
</body>
<!--
IE6下有些bug需要做下兼容
1. IE6的奇偶bug
如果定位外框高度或是宽度为奇数，则IE6下，绝对定位元素的低定位和右定位会有1像素的误差。所以，尽量保证外框的高度或宽度为偶数值。
2. IE6的空p莫名高度bug
IE6下，空p会有莫名的高度，也就是说height:0;不顶用，此时形成的尖角的实际占高于其他浏览器是有差异的。可使用font-size:0; + overflow:hidden;修复此问题。
3. IE6不支持实线边框透明transparent属性
IE6不支持实线边框透明transparent属性，当某边框设置为transparent属性，且有宽度的话，那么透明会以默认的黑色显示的。解决方法有两个，一是将需要隐藏的颜色设置为背景色，这样与透明效果一样，此法有局限性，在复杂“边框法”应用下是行不通的；二是可以使用dashed代替solid，可以实现IE6下边框transparent透明。
-->
</html>
以上就是对CSS实现对话框效果如何实现（代码）的全部介绍，如果您想了解更多有关CSS视频教程，请关注PHP中文网。
Atas ialah kandungan terperinci CSS实现对话框效果如何实现（代码）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Artikel ini dikembalikan pada:csdn.net. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：弹性盒子中间自适应如何设置（代码教程）Artikel seterusnya：多个div垂直居中横向排列（附代码）