標籤：top 純css www. upload 透明 otc ora title 一個
如下：
源碼：
<!DOCTYPE html public "-//w3c//dtd html 4.01 transitional//en""http://www.w3c.org/tr/html4/loose.dtd"><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> p{color: #fff;} .test{ width: 300px; padding: 30px 20px; margin: 60px; background: #ce5010; position: relative; border-radius: 10px; } .test span{ width: 0; height: 0; font-size: 0; overflow: hidden; position: absolute; } .test span.bot{ border-width: 20px; border-style: solid; border-color: transparent #ce5010 #ce5010 transparent; left: -40px; top: 40px; } .test span.top{ border-width: 10px 20px; border-style: solid; border-color: transparent #fff #fff transparent; left: -40px; top: 60px; } .test .orgBotCor{ color: #333; font-size: 60px; position: absolute; line-height: 60px; top: -30px; color: #ce5010; } .test.newBG span.bot2{ border-width: 20px; border-style: solid dashed dashed; /*這裡用dashed是為瞭解決防止IE6下的bug， 如果是solid，無法顯示透明，具體原因不明*/ border-color: #ce5010 transparent transparent; bottom: -40px; } .test.newBG span.top2{ border-width: 20px; border-style: solid dashed dashed; border-color: #fff transparent transparent; bottom: -33px; } .newBG{ background-color: #fff; border: #ce5010 5px solid; color: #ce5010; } .orangeColor{ color: #ce5010; } </style></head><body> <div class="test"> <span class="bot"></span> <span class="top"></span> <p>CSS"邊框法"實現氣泡對話方塊效果，需要兩個輔助span</p> </div> <div class="test"> <b class="orgBotCor">◆</b> <p>CSS"符號法"實現氣泡對話方塊效果，需要一個<b></p> </div> <div class="test newBG"> <span class="bot2"></span> <span class="top2"></span> <p class="orangeColor">CSS"邊框法"實現氣泡對話方塊效果，需要兩個<span></p> </div></body><html>
純CSS實現氣泡框
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
