html+css创建提示框

看到下面的效果了吗？

本来我们站点是用下面的图片做的背景，

但是后期当更改完框中的提示内容，并且更新内容较多的时候，发现内容溢出了，如下图：

但是背景图片不能自动拉伸，还得重新做一张背景图，这样就导致没更新一次信息就得重新绘制一张背景图，经过qq网名为虫子²º¹³的大牛指点，用html + css，但不使用背景图片，同样做出了这种效果，直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
<!--body{padding:100px;}-->
<!--.tip{position: relative;padding:50px;border:1px solid #000;border-radius: 10px;}-->
.tip{position: absolute;padding:50px;border:1px solid #000;border-radius: 10px;}
.angle{width: 20px;height: 20px;line-height: 20px;overflow:hidden;font-size:20px;position: absolute;font-family:"SimSun";bottom:45px;left:-11px;}
.angle i{position: absolute;top:0;left:0;font-style: normal;}
.angle .b{color:#000;z-index: 1;}
.angle .t{color:#fff;z-index: 2;left:2px;}
</style>
<body>
    <div class="tip">
        <span class="angle">
            <i class="b">◆</i>
            <i class="t">◆</i>
        </span>
        <p> 版本号：v2.0.8大小：6.70M更新日期：14-08-27 15:37 </p>
        <p> 更新描述：优化了几个bug； </p>
        <p><button>下载SDK包</button></p>
    </div>
</body>
</html>

View Code

运行结果如图所示：

这样好处如下：

1. 可以省掉图片，

2. 大小和角标都可以随意控制

3. 位置和大小，颜色一样可以css控制

4. .tip设置为position:absolute，就可自适应内部内容大小；tip加box-shadow，还可以方便增加阴影;用图片做背景，对这些支持就很麻烦了。

但是这种css3的特性，只能适应高级浏览器，IE7及以下版本不支持，他们将显示为直角，而不是圆角，低版本解决办法是：定位4个圆角图片，放到4角。（我们觉得可以不用这么做，提示框是直角的也没什么。就看需求了。）

大牛告诉我说：

渐进增强，这个原则下，这样处理是最优的。
后期维护、减少请求数、效率。
这些因素就要靠自己权衡了。

特效的实现还得继续努力加油啊……以后多向大牛们学习学习……

posted @ 2014-09-16 20:31 zzuIvy 阅读(3923) 评论(0) 编辑收藏举报

刷新页面返回顶部

zzuIvy

html+css创建提示框

公告