CSS实现对话框效果

最新推荐文章于 2024-06-15 21:29:25 发布

pingwei_deng

最新推荐文章于 2024-06-15 21:29:25 发布

阅读量3.8k

点赞数 5

分类专栏： css

本文链接：https://blog.csdn.net/pingwei_deng/article/details/80367834

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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 div{ 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 div{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
	    .test2 div.bot{
	        border-width:20px;
	        border-style:solid dashed dashed;
	        border-color:#beceeb transparent transparent;
	        left:80px;
	        bottom:-40px;
	    }
	    .test2 div.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 div{ 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>
	<div class="test1">
	    <div class="bot"> </div>
	    <div class="top"> </div>
	    CSS实现对话框效果一
	</div>
	<div class="test2">
	    <div class="bot"></div>
	    <div class="top"></div>
	    CSS实现对话框效果e二
	</div>
	<div class="test3">
	    <div class="bot"> </div>
	    <div class="top"> </div>
	    CSS实现对话框效果三
	</div>
</body>

<!-- 
	IE6下有些bug需要做下兼容

	1. IE6的奇偶bug
	如果定位外框高度或是宽度为奇数，则IE6下，绝对定位元素的低定位和右定位会有1像素的误差。所以，尽量保证外框的高度或宽度为偶数值。

	2. IE6的空div莫名高度bug
	IE6下，空div会有莫名的高度，也就是说height:0;不顶用，此时形成的尖角的实际占高于其他浏览器是有差异的。可使用font-size:0; + overflow:hidden;修复此问题。

	3. IE6不支持实线边框透明transparent属性
	IE6不支持实线边框透明transparent属性，当某边框设置为transparent属性，且有宽度的话，那么透明会以默认的黑色显示的。解决方法有两个，一是将需要隐藏的颜色设置为背景色，这样与透明效果一样，此法有局限性，在复杂“边框法”应用下是行不通的；二是可以使用dashed代替solid，可以实现IE6下边框transparent透明。
 -->
</html>

pingwei_deng

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS实现对话框效果

&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;CSS实现对话框效果&lt;/title&gt; &lt;style&gt; /*CSS实现对话框效果一*/ .test1{width:300px
复制链接

扫一扫

专栏目录