知行合一，止于至善
千里之行，始于足下；合抱之木，生于毫末；九层之台，起于累土纯CSS实现输入提示框
12月 9, 2014 |
Nix.Huang
提示框的实现由很多种方式，最常见的实现是使用一个小图片作为前面的小三角，其实提示框完全可以使用纯CSS实现。
实现原理：
当一个dom元素只有border有没有内容，而某些边透明的时候，奇迹就发生了
|
1 2 3 4 5 |
<div id="prompt-box" style="position:relative; border:2px solid #000; height:50px; width:200px; margin-left:200px;"> <span id="icon-border" style="position:absolute;border-width:8px; border-style:solid; border-color:transparent rgba(0,0,0,1) transparent transparent; height:0px; width:0px; left:0px; top:16px;"></span> </div> |
在这个示例中，我们将span元素的边颜色设置为"transparent rgba(0,0,0,1) transparent transparent",三边透明，就可以显示为一个小三角型（只有将span设置为position:absolute才能摆脱行高，不然显示地结果并不是我们想要的），如果一个白色的小三角型叠在一个黑色的小三角形上面，让其有两个像素的偏移，那么一个小箭头就制作完毕了。
|
1 2 3 4 5 6 7 8 |
<div id="prompt-box" style="position:relative; border:2px solid #000; height:50px; width:200px; margin-left:200px;"> <span id="icon-border" style="position:absolute;border-width:8px; border-style:solid; border-color:transparent rgba(0,0,0,1) transparent transparent; height:0px; width:0px; left:-16px; top:16px;"></span> <span id="icon-bg" style="position:absolute;border-width:8px; border-style:solid; border-color:transparent rgba(255,255,255,1) transparent transparent; height:0px; width:0px; left:-14px; top:16px;"></span> </div> |
Posted in: WEB practise | Tags: border-color, 提示框
Comments are closed.