Comment implémenter l'effet de boîte de dialogue avec CSS (code)-tutoriel CSS-php.cn

Comment implémenter l'effet de boîte de dialogue avec CSS (code)

云罗郡主

Libérer： 2018-10-19 15:15:54

avant

2278 Les gens l'ont consulté

Le contenu de cet article explique comment implémenter l'effet de boîte de dialogue en CSS (code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

<!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>

Copier après la connexion

Ce qui précède est une introduction complète à la façon d'implémenter l'effet de boîte de dialogue en CSS (code). Si vous souhaitez en savoir plus sur le Tutoriel vidéo CSS, veuillez suivre le site Web PHP chinois.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!