纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框

  在前面一篇中我们介绍了纯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提示框”添加个边框到此结束!具体颜色样式大家可以随自己要求自己做修改~~

时间: 2024-10-22 17:49:57

纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框的相关文章

纯CSS实现tooltip提示框,CSS箭头及形状

原文:纯CSS实现tooltip提示框,CSS箭头及形状 本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状! 首先介绍一下CSS:after选择器 定义和用法:(参考w3school:after选择器) :after选择器在被选元素的内容后面插入内容,使用content属性来指定要插入的内容 例: p:after { content:"台词:-"; background-color:yellow; color:red; font-weight:bold; } 具体大家可以参

CSS制作的导航菜单向上箭头

使用纯CSS技术制作导航菜单上的向上箭头图标,不使用图片,用CSS实现,挑战自己的CSS布局水平,最终效果自己满意,如果您对此感兴趣的话,就要好好研究一下CSS代码啦. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="h

清除Css中select的下拉箭头样式

select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/ background: url("http://ourjs.github.io/static/2015/arrow.png")

css清除select的下拉箭头样式

select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/ background: url("http://ourjs.github.io/static/2015/arrow.png")

jQuery实现TEXT文本框输入时的提示信息(谷歌百度淘宝搜索框提示实现)

在搜索框中,输入之前框内有输入的提示信息,文本框获得焦点后会自动消失的效果,效果图如下: 鼠标放在文本框时的效果: 创建工具类(已经存在就不用创建了)Util.js(DWR的JS) 在里面添加如下方法: Js代码 /** * Input框里的灰色提示,使用前先引入jquery * <br>使用方法:<input type="text" tipMsg="您的用户名"   /> * * @return */ function inputTipTe

CSS Sticky Footer: 完美的CSS绝对底部

下面是我找到的一个比较完美的方法,来自国外的设计达人,纯CSS,可以实现: 当正文内容很少时,底部位于窗口最下面.当改变窗口高度时,不会出现重叠问题. <div id="wrap"> <div id="main" class="clearfix"> <div id="content"> </div> <div id="side"> </div

初学CSS(写于接触CSS不到1个星期)

什么是web前端? 在第一次上课的时候就问过我们,当时我认为前端就是设计网页,但具体是什么,我也不是很清楚.老师解释道:web前端,就是你打开浏览器之后,所能看到的一切,都是用前端技术实现的.(我以前还认为页面是画出来的,没想到是写出来的,一下就高大上了...) 前端技术的核心有三个:HTML(超文本标记语言,主要用来描述一个网页的结构的).CSS(层叠样式表,用来装饰网页).javascript(网页上的脚本语言,是用来编程的). 我理解CSS就是对于框架元素的全面补充,就好像是修房子,用HT

CSS可视化格式模型(CSS Mastery随笔)

CSS渲染页面的时候,把每个文档元素看作是盒子. CSS盒子模型 margin,padding,border,内容. margin会出现margin折叠.上下元素的margin折叠.左右的不折叠.包含的元素之间marign也会折叠.margin折叠的好处是文档排版齐整. 每个元素都会有一个框.这个框分两种类型.块级元素的块框.行内元素的行内框. 行框:还有行框的概念,行框的高度由中间最高的行内框决定.设置行内框的高度.padding.margin并不影响行框的高度.行框的高度line-heigh

《CSS设计指南》笔记--CSS工作原理

通过阅读和学习书籍<CSS设计指南>总结 <CSS设计指南>/Charles lvyke-Smith著.李松峰译-人民邮电出版社 本书网站:http://www.stylinwithcss.com 强烈推荐!!深入浅出,精简,适合入门!! CSS工作原理 2.1 剖析CSS规则 ??规则实际上就是一条完整的CSS指令.规则声明了要修改的元素和要应用给该元素的样式. 2.1.1 为文档添加样式的三种方法 ??有三种方法可以把CSS添加到网页中,分别是写在元素标签里(行内样式),写在&