::before和::after

        当然文章我会直接以一个示例来演示如何运用CSS:beforeCSS:after的组合以及CSS:border实现一个通知框架中的小三角;这个演示对象我从Google找到,并且花费点时间从网站中上分离下来;当然在开始之前,你可能需要下载一份演示文件来观看它是如何运作的。


演示文件 — (搬运工:Cabbagelol)


我对这份演示文档进行了一些整理,虽然没法帮助你,起码在阅读起来会舒服很多。

css_sanjiaob

        通过演示文件打开目录下的index.html文件,你能从index.html文件中找到右图图片中看到二处高亮区域,图片标记的位置即是:1.大容器左上角,2.大容器内白色提示框下;(1)和(2)使用二处不同方法到达效果,(1)则是通过CSS样式对DIV标签赋予三角样式(参考文章尾标注),如文章开头所说的‘border’,并给这个div赋予浮空,top值设置在正值之外,使得三角在div外面并在刚好的位置,便成图片中的(1)效果一样,需要注意的是如果不给大容器同时赋予浮空(position),如果不赋予大容器,那么会根据body与大容器top距离;2则通过选择器中的CSS:beforeCSS:after实现,定义:被选元素的内容前面或后面插入内容,通过这样的特性,开发者可以对任何标签类型前后插入内容。

这样的选择器组合(指before和after),经常会被这样写,并且用在需要批量在特定或全局标签前插入内容:

span:before{ 
content:"注释:";
background-color:yellow;
color:red;
font-weight:bold;
}

在套用了span:before后所有span内最前会变成:

	注释:我是唐老鸭。
	注释:我住在 Duckburg。

        这和列表标签相识之处,但完全又是一个完全不同的东西,一个是标签一个是选择器类型;正是这样,实现一个仿Google通知窗口变得容易起来,在建立一个居中且处于div下方的小三角形(不影响原div下),首先需要赋予在一个div上,并且先为这个div提供一个高度,之后来设置背景颜色,再建立这个div内的CSS:before和CSS:after,这时候应该根据当前div样式名称设置为.div:before和.div:after(注意id或是样式),此时二个before和after还是一个看不见的正方体div,继续添加样式{border-color:rgba(255,255,255,0);border-top-color:#fff;border-width:5px;margin-left:-5px} 和{border-color:rgba(170,170,170,0);border-top-color:#aaa;border-width:6px;margin-left:-6px},注意前后,需要考虑用白色在之上,灰色其下,灰色的after(后)向外XY移动0.5px,达到描边效果。

before和after位置形象图:

	<div>
	::before //位置不能被改变
	  //文本
	::after //位置不能被改变
	</div>

当你创建before和after的样式后,这时候你基本能看到一个小的三角形,当然如果不需要描边实际上创建一个before小三角也可以满足。

 

css_sanjiao_b实际上还有更多方法来表示这个对话框,从一些项目中也有用transform配合z-index来实现,什么这样也行?当然行,我们梳理下,我们通过建立二个div一个上下层关系,并给其中一个作为小三角同时给予CSS3样式中的旋转,旋转度数为45;大概过程:首先建立一个大框架,再给框架内建立二个div标签,其中一个div标签给diva另一个给.divb,.diva作为小三角,.divb成为对话框,接着给.diva添加transform:rotate(45deg)以及z-index:1、top、left等宽高属性,对应的.divb添加z-index:2等宽高属性。

方法很多,能到达终点既是一个可行方案。

 

 

 

—— 感谢你抽出宝贵的时间来阅读,非常欢迎指出不妥之处。


选择器:在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。在下方还有下列:http://www.w3school.com.cn/cssref/css_selectors.asp

CSS绘制三角形:请参考这里:http://www.jb51.net/article/42513.htm


暂无评论

发表评论


Cabbagelol将做些什么
负责记录Cabbagelol的总结,或者共享有趣的内容,这就是后院的最重要做的事情⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄。
备案:粤ICP备15107172号-1
邮箱:nickmiku@foxmail.com

Copyright © 2015 - 2017 Cabbagelol. All Rights Reserved. Powered By Wordpress(EverBox).