浮出层的css写法,完美兼容IE6~10_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:42:28
Original
984 Leute haben es durchsucht

利用元素间的绝对定位差一像素,使用不同颜色做出浮出层小三角的效果,完美兼容各浏览器!

html部分:

<div class="poptip"><span class="poptip-arrow poptip-arrow-top"><em>◆</em><i>◆</i></span><span class="poptip-arrow poptip-arrow-right"><em>◆</em><i>◆</i></span><span class="poptip-arrow poptip-arrow-bottom"><em>◆</em><i>◆</i></span><span class="poptip-arrow poptip-arrow-left"><em>◆</em><i>◆</i></span> Hi,知道吗?<br>我是打酱油的!</div>
Nach dem Login kopieren

css部分:

/* poptip */.poptip{position: absolute;top: 20px;left:20px;padding: 6px 10px 5px;*padding: 7px 10px 4px;line-height: 16px;color: #DB7C22;font-size: 12px;background-color: #FFFCEF;border: solid 1px #FFBB76;border-radius: 2px;box-shadow: 0 0 3px #ddd;}.poptip-arrow{position: absolute;overflow: hidden;font-style: normal;font-family: simsun;font-size: 12px;text-shadow:0 0 2px #ccc;}.poptip-arrow em,.poptip-arrow i{position: absolute;left:0;top:0;font-style: normal;}.poptip-arrow em{color: #FFBB76;}.poptip-arrow i{color: #FFFCEF;text-shadow:none;}.poptip-arrow-top,.poptip-arrow-bottom{height: 6px;width: 12px;left:12px;margin-left:-6px;}.poptip-arrow-left,.poptip-arrow-right{height: 12px;width: 6px;top: 12px;margin-top:-6px;}.poptip-arrow-top{top: -6px;}.poptip-arrow-top em{top: -1px;}.poptip-arrow-top i{top: 0px;}.poptip-arrow-bottom{bottom: -6px;}.poptip-arrow-bottom em{top: -8px;}.poptip-arrow-bottom i{top: -9px;}.poptip-arrow-left{left:-6px;}.poptip-arrow-left em{left:1px;}.poptip-arrow-left i{left:2px;}.poptip-arrow-right{right:-6px;}.poptip-arrow-right em{left:-6px;}.poptip-arrow-right i{left:-7px;}
Nach dem Login kopieren

ps:如果小三角需要居中,可以left或者top 50%

 

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage