介绍 & lt; !doctype html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title> CSS实现对话框效果& lt;/title>
& lt; style>/* CSS实现对话框效果一*/.test1{宽度:300 px;高度:30 px;填充:30 px 20 px;margin-left: 100 px;背景:# eb7956;位置:相对;}
.test1 p{宽度:0;高度:0;位置:绝对的,}
.test1 .bot {
边框宽度:20 px;
边框样式:固体;
边框颜色:# ffffff # eb7956 # eb7956 # ffffff;
左:-40 px;
上图:40像素;
}
直.test1上{
边框宽度:10 px 20 px;
边框样式:固体;
边框颜色:透明# ffffff # ffffff透明;
左:-40 px;
上图:60 px;
}/* CSS实现对话框效果二*/.test2{宽度:300 px;填充:30 px 20 px;边界:5 px固体# beceeb;位置:相对;margin-top: 10 px;}
.test2 p{宽度:0;高度:0;字体大小:0;溢出:隐藏;位置:绝对的,}
.test2 p.bot {
边框宽度:20 px;
边框样式:固体冲破灭;
边框颜色:# beceeb透明透明;
左:80 px;
底部:-40 px;
}
.test2 p.top {
边框宽度:20 px;
边框样式:固体冲破灭;
边框颜色:# ffffff透明透明;
左:80 px;
底部:-33 px;
}/* CSS实现对话框效果三*/.test3{宽度:300 px;高度:30 px;border - radius: 160 px/45 px;填充:30 px 20 px;margin-left: 100 px;背景:# eb7956;位置:相对;margin-top: 10 px;}
.test3 p{宽度:0;高度:0;位置:绝对的,}
.test3 .bot {
边框宽度:20 px;
边框样式:固体;
边框颜色:透明# eb7956 # eb7956透明;
左:-30 px;
上图:40像素;
}
直.test3上{
边框宽度:10 px 20 px;
边框样式:固体;
边框颜色:透明# ffffff # ffffff透明;
左:-30 px;
上图:60 px;
}
& lt;/style>
& lt;/head>
& lt; body>
类& lt; p=皌est1"祝辞
类& lt; p=癰ot"祝辞& lt;/p>
类& lt; p=皌op"祝辞& lt;/p>
CSS实现对话框效果一
& lt;/p>
类& lt; p=皌est2"祝辞
类& lt; p=癰ot"祝辞& lt;/p>
类& lt; p=皌op"祝辞& lt;/p>
CSS实现对话框效果e二
& lt;/p>
类& lt; p=皌est3"祝辞
类& lt; p=癰ot"祝辞& lt;/p>
类& lt; p=皌op"祝辞& lt;/p>
CSS实现对话框效果三
& lt;/p>
& lt;/body>
& lt; !
IE6下有些错误需要做下兼容
1. IE6的奇偶错误
如果定位外框高度或是宽度为奇数,则IE6下,绝对定位元素的低定位和右定位会有1像素的误差,所以,尽量保证外框的高度或宽度为偶数的值。
2. IE6的空p莫名高度bug
IE6下,空p会有莫名的高度,也就是说身高:0;不顶,用此时形成的尖角的实际占高于其他浏览器是有差异的。可使用字体大小:0;+溢出:隐藏;修复此问题。
3.IE6不支持实线边框透明透明属性
IE6不支持实线边框透明透明属性,当某边框设置为透明属性,且有宽度的话,那么透明会以默认的黑色显示的。解决方法有两个,一是将需要隐藏的颜色设置为背景色,这样与透明效果一样,此法有局限性,在复杂”边框法”应用下是行不通的;二是可以使用虚线代替固体,可以实现IE6下边框透明透明。
——比;
& lt;/html>
这篇文章主要介绍CSS怎么实现对话框效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
以上是CSS怎么实现对话框效果的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
