溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

CSS怎么實(shí)現(xiàn)對話框效果

發(fā)布時間：2020-09-14 10:33:32 來源：億速云 閱讀：231 作者：小新 欄目：web開發(fā)

這篇文章主要介紹CSS怎么實(shí)現(xiàn)對話框效果，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS實(shí)現(xiàn)對話框效果</title>
	<style>
		/*CSS實(shí)現(xiàn)對話框效果一*/
		.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實(shí)現(xiàn)對話框效果二*/
	    .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實(shí)現(xiàn)對話框效果三*/
	    .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實(shí)現(xiàn)對話框效果一
	</p>
	<p class="test2">
	    <p class="bot"></p>
	    <p class="top"></p>
	    CSS實(shí)現(xiàn)對話框效果e二
	</p>
	<p class="test3">
	    <p class="bot"> </p>
	    <p class="top"> </p>
	    CSS實(shí)現(xiàn)對話框效果三
	</p>
</body>

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

	1. IE6的奇偶bug
	如果定位外框高度或是寬度為奇數(shù)，則IE6下，絕對定位元素的低定位和右定位會有1像素的誤差。所以，盡量保證外框的高度或?qū)挾葹榕紨?shù)值。

	2. IE6的空p莫名高度bug
	IE6下，空p會有莫名的高度，也就是說height:0;不頂用，此時形成的尖角的實(shí)際占高于其他瀏覽器是有差異的。可使用font-size:0; + overflow:hidden;修復(fù)此問題。

	3. IE6不支持實(shí)線邊框透明transparent屬性
	IE6不支持實(shí)線邊框透明transparent屬性，當(dāng)某邊框設(shè)置為transparent屬性，且有寬度的話，那么透明會以默認(rèn)的黑色顯示的。解決方法有兩個，一是將需要隱藏的顏色設(shè)置為背景色，這樣與透明效果一樣，此法有局限性，在復(fù)雜“邊框法”應(yīng)用下是行不通的；二是可以使用dashed代替solid，可以實(shí)現(xiàn)IE6下邊框transparent透明。
 -->
</html>

以上是CSS怎么實(shí)現(xiàn)對話框效果的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手