js&css无图片实现tip提示效果学习总结

10
22
2011

js&css无图片实现tip提示效果学习总结

<div class="tip">
   Tips Test<br/>Hello Tips!
  <span class="tip-out">
     <span class="tip-in"></span>
  </span>
</div>

.tip{
/*注意边框的颜色和背景色很重要！*/
 border:6px solid gray;
 background-color:skyblue;
/*宽和高根据需要设置，ps：需要配合tip-top和tip-in位置来进行设置！*/
 width:420px;
 height:420px;
 
/*下面仅仅是对tips里面内容的设置，so可以说不相关！*/
 line-height:210px;
 font-weight:bold;
 text-align:center;
}
 .tip-out,.tip-in{
/*首先设置边框宽度（需要经过计算过！），然后设置其颜色为透明：这个很重要。
 至于边框的样式可以自己调试修改下看效果如何，因为我这个没怎么测试
*/
 border:100px solid transparent;
/*然后设置上边框，主要是设置颜色
 颜色跟tips内颜色一致，这个就是tips下面的那个角，所以要一致才行
*/
 border-top-color:skyblue;
 position:absolute;
 
/*这个的作用是将span对象呈递为内联对象，但是对象的内容作为块对象呈递。
旁边的内联对象会被呈递在同一行内
其实这个在这边的作用不大，如果将span改为div，那么这个就不需要设置了。
更确切的说这个其实是不用写的，因为貌似将一个
对象设置为position:absolute后，这个对象就成了块级元素了，
so其实这个可以去掉。当然作为学习，so放在这边了！
最后发现的一个问题是：块级元素默认是占用整个屏幕宽度的（当然可以设置
其宽&高为0），但如果设置了为absolute的话，其边框内部的空间就默认
为0*0了（如果没有放内容），这就是为什么要改为块级元素的原因了。
*/
 display:inline-block;/*可选项目，其实不需要的了……*/
}
 
 
/*下面是分别设置tip-out,tip-in的位置以便组合成tips下的角，
然后设置tip-out的颜色为tips的边框色，以衔接tips的边框*/
.tip-out{
  border-top-color:gray;
  top:440px;
 left:40px;
}
.tip-in{
 top:-110px;
 left:-100px;
}

由于时间问题，先上代码！！以后在进行注解！当作是复习吧！反正是通过边框来实现的。

分析：

原本我以为是通过border-radius来实现tips上的尖角效果的，但是发现border-radius设置的再大，最终就变成了一个很圆的圆而已……

后来找了 js无图片实现tip提示效果 3K完美搞定这个例子后才知道其原理（不过可能还有别的实现方法吧！呵呵，学无止尽，方法也有很多的吧！），主要还是通过边框来实现的。

其中最重要的一点就是，首先不能为行内元素而是要块级元素，然后就是绝对定位方式（不占用原来的空间，然后可以任意定位），最后就是设置边框了（原理所在）。主要的两句是

1 2	`border:100px` `solid` `transparent;` `border-top:100px` `solid` `skyblue;`

首先就是要设置所有边框为透明，然后设置需要显示的边框&颜色。其实主要是为了显示一个三角形出来，然后两个三角形进行叠加后就能出现所需要的效果了！

那么三角形是如何出现的呢？首先一个条件就是边框内部的高&宽为0！！不然不会出现尖尖的角的！因为由于内部空间为0，所以四条边框重叠了，然后进行透明&不透明设置（如上设置）后，就能出现三角形了，因为举例来说上边框&其相邻的左边框在交界处是以对角线来划分作为分界线的，所以在设置不同颜色的时候会有尖角出现！这个的测试代码如下！

<div></div>
 
<style>
div{
 height:0px;width:0px;
/*display:inline-block;另一种选择*/
 
 border-style:solid;
 border-width:100px;
 border-left-color:#666;
 border-top-color:#444;
 border-right-color:#222;
 border-bottom-color:#000;
}
</style>

效果如下

由于上面的tips测试代码的宽&高太大，不好演示，所以我做了调整，测试代码如下，很小了，这个也没有计算的太好，所以有点不均匀（貌似在ff下显示上回有点问题，有些郁闷）

Hello Tips!

鼠标移到这边来！

终于写完了，虽然不是很美观，但是学习了，貌似图片也许是不错的选择吧！

Category: Web设计 | Tags: javascript css | Read Count: 5128

[回复]

λ 说:
2011年10月23日 01:47

沒附上例子……

我看主要就是transparent和inline-block這兩個東東要解釋了吧？

[回复]

wind 说:
2011年10月23日 13:20

@λ: 慢慢来，附上的代码就是我自己写的测试例子啊！！是根据我前面发的那个文章来写的测试例子啦！不着急，我等会就解释下！

[回复]

λ 说:
2011年10月26日 12:34

@wind: -_-...感觉分析之前的很难一下看懂，先把下面的三角形效果的原理放到前面说比较好。

[回复]

λ 说:
2012年3月28日 19:42

这篇文章有说弄三角形的，只设左右和底部的颜色就可以了
http://coolshell.cn/articles/6913.html

Feng's Blog

Just as Wind ... I am backing ...