溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹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怎么實現對話框效果的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
