在前面一篇中我們介紹了純CSS實現tooltip提示框，通俗的講也就是CSS箭頭及形狀
不過注意一點是，他始終是一個元素，只是通過CSS實現的，今天我們要說的是給這個“tooltip提示框”整體加一個邊框，下面是是一篇完成的截圖（不了解的可以看看：純CSS實現tooltip提示框，CSS箭頭及形狀）：
首先像:after一樣我們介紹另外一個CSS中“ :before ”選擇器
定義和用法：（參考w3school:before選擇器）
:before 選擇器在被選元素的內容前面插入內容，使用 content 屬性來指定要插入的內容
例：
p:before
{
content:"台詞：-";
background-color:yellow;
color:red;
font-weight:bold;
}
下面一步一步實現給該tooltip整體添加邊框：
首先HTML代碼：
<body> <div class="demo"></div> </body>
讓我們來設置盒子的樣式
<style> .demo{ background-color: gray; height: 100px; position: relative; width: 100px; } </style>
截圖：
(其中具體的position的設定緣由大家看前一篇的解釋，謝謝~~)
接着“引入”箭頭，注意這里要同時用到“ :after ”和“ :before ”兩個CSS選擇器同時產生不同尺寸的箭頭，基本樣式：
<style> .demo{ background-color: gray; height: 100px; position: relative; width: 100px; } .demo:after,.demo:before{ content:''; position:absolute; } .demo:after{ height:20px; width:20px; background:yellow; } .demo:before{ height:30px; width:30px; background:green; } </style>
截圖：
繼續，我們要給黃色方塊和綠色方塊設置邊框，樣式：
<style> .demo{ background-color: gray; height: 100px; position: relative; width: 100px; } .demo:after,.demo:before{ content:''; position:absolute; } .demo:after{ height:20px; width:20px; background:yellow; border:5px solid lightgreen; } .demo:before{ height:30px; width:30px; background:green; border:5px solid red; } </style>
截圖：
再者我們將黃色方塊和綠色方塊內容去掉，通過去掉:after和:before的height、width，僅剩下淺綠色方框和紅色方框，分別是黃色方塊、綠色方塊的邊框，樣式：
<style> .demo{ background-color: gray; height: 100px; position: relative; width: 100px; } .demo:after,.demo:before{ content:''; position:absolute; } .demo:after{ //height:20px; //width:20px; background:yellow; border:5px solid lightgreen; } .demo:before{ //height:30px; //width:30px; background:green; border:5px solid red; } </style>
截圖：
這里注意紅色的邊框被覆蓋了，所以我們需要給淺綠色方塊和紅色方塊增加像素，但是增加的像素值彼此不相同，為后續做准備，樣式：
<style> .demo{ background-color: gray; height: 100px; position: relative; width: 100px; } .demo:after,.demo:before{ content:''; position:absolute; } .demo:after{ //height:20px; //width:20px; background:yellow; border:10px solid lightgreen; } .demo:before{ //height:30px; //width:30px; background:green; border:15px solid red; } </style>
截圖：
注意，這里我們將淺綠色的邊框像素值由5px改為了10px；而紅色邊框由5px改為了15px,如上圖，但值得小心的是區分這里的淺綠色方框、紅色方框與上面的黃色方塊、綠色方塊樣子相同，但性質卻截然不同，一種是邊框，一種是方塊~~而實現箭頭是通過邊框來實現的，原理參見上一篇純CSS實現tooltip提示框，CSS箭頭及形狀
下面來實現箭頭，樣式：
<style> .demo{ background-color: gray; height: 100px; position: relative; width: 100px; } .demo:after,.demo:before{ content:''; position:absolute; } .demo:after{ //height:20px; //width:20px; //background:yellow; //border:10px solid lightgreen; border:10px solid transparent; border-top-color:lightgreen; } .demo:before{ //height:30px; //width:30px; //background:green; //border:15px solid red; border:15px solid transparent; border-top-color:red; } </style>
截圖：
然后我們通過position:absolute的top、right、bottom、left，以下簡稱TRBL來設置箭頭及邊框（這里指紅色邊框，即將成為箭頭的邊框）的位置，樣式：
<style> .demo{ background-color: gray; height: 100px; position: relative; width: 100px; } .demo:after,.demo:before{ content:''; position:absolute; } .demo:after{ //height:20px; //width:20px; //background:yellow; //border:10px solid lightgreen; border:10px solid transparent; border-top-color:lightgreen; top:100px; left:20px; } .demo:before{ //height:30px; //width:30px; //background:green; //border:15px solid red; border:15px solid transparent; border-top-color:red; top:100px; left:15px; } </style>
截圖：
接着來設置灰色盒子的邊框為紅色，邊框大小與紅色相同，同時將箭頭淺綠色改為灰色，使其看起來渾然一體，樣式：
<style> .demo{ background-color: gray; height: 100px; position: relative; width: 100px; border:2.75px solid red; } .demo:after,.demo:before{ content:''; position:absolute; } .demo:after{ //height:20px; //width:20px; //background:yellow; //border:10px solid lightgreen; border:10px solid transparent; border-top-color:gray; top:100px; left:20px; } .demo:before{ //height:30px; //width:30px; //background:green; //border:15px solid red; border:15px solid transparent; border-top-color:red; top:100px; left:15px; } </style>
截圖：
其中灰色盒子的邊框2.75px與箭頭邊框紅色部分的寬度計算，大家自己捉摸捉摸哈~~數學問題！
至此，我們的續寫，給“tooltip提示框”添加個邊框到此結束！具體顏色樣式大家可以隨自己要求自己做修改~~
更多知識分享：微笑空間站