我们知道,css伪元素包括after,before,first-letter等,通过合理的利用伪元素,我们可以让我们的结构更简洁。

通常写法如p::after{content:' '},其中content内容可以是字符也可以是图片,例如p:before{content:'尾部'},p:after { content:url(img.jpg); } ,我们最常用的可能是用来清除浮动或添加一些简单的元素(如div首尾内容等)。

今天来总结一下其他的几种用法:

以下代码全部针对谷歌浏览器,如需针对其他浏览器,需用兼容性写法

一.常见消息框

假如我们要实现这样的效果要怎么做?用图片吗?no!

我们知道当设置元素宽高都为0px时,设置4条border为不同颜色,将会是这个样子

 

所以我们可以利用这个特性来制作上面的内容:

 1 <style>
2 div{width:300px;
3 background-color:rgba(0,0,0,0.7);
4 color:#fff;
5 font-family:'Microsoft YaHei';
6 text-align:center;
7 padding:5px;
8 margin:100px auto;
9 position:relative
10 }
11 div::before{content:' ';
12 width:0px;
13 height:0px;
14 position:absolute;
15 left:-12px;
16 top:50%;
17 -webkit-transform:translate(0px,-50%);
18 border:6px solid rgba(0,0,0,0.7);
19 border-color:transparent rgba(0,0,0,0.7) transparent transparent
20 }
21 </style>
22
23 <div>我是内容我是内容我是内容</div>

  注意,此时伪类content:' ',而非content:'',而且伪类4条边必须宽度相同,而且其他三条边为transparent才可以;对于-webkit-transform设置在之前的文章中已经讲过,可以通过设置定位元素left,top值为50%,translate(-50%,-50%) 来使任意宽高的元素居中。

ps:当然我们也可以通过定位叠加来实现有边框有底色的小三角。

二.阴影

    先看下图,通过伪类,我们可以实现如下效果,而不用再用图片

我们来看代码:

 <style>
body{background-color:#ebebeb}
div.outer{width:400px;
height:250px;
padding:5px;
margin:100px auto;
position:relative;
}
div.child{
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
background-color:#fff;
color:#000;
line-height:250px;
font-family:'Microsoft YaHei';
text-align:center;
z-index:2
}
div.outer::before,div.outer::after{content:'';
z-index:1;
width:50%;
height:3px;
position:absolute;
left:10px;
bottom:7px;
background-color:transparent;
box-shadow:5px 5px 10px rgba(0,0,0,0.5);
-webkit-transform:rotate(-3deg); }
div.outer::after{
left:auto;
right:10px;
-webkit-transform:rotate(3deg)
}
</style>
<div class='outer'>
<div class='child '>
我是内容我是内容我是内容
</div>
</div>

       通过设置before,after不同位置,不同旋转角度,可以实现现在网络很流行的阴影效果,同时要保证伪类的颜色及z-index。有了这种方法 我们就可以扩展出各种各样的阴影效果,同理照片叠加效果也是类似,自己动手试验一下吧。

css before,after伪元素妙用的更多相关文章

  1. 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

    最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...

  2. 转载 【CSS进阶】伪元素的妙用--单标签之美

    1.单个颜色实现按钮 hover .active 的明暗变化 请点击 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果 2.利用after伪类清除浮动 .clearfix:a ...

  3. 【CSS进阶】伪元素的妙用--单标签之美

    最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...

  4. CSS :befor :after 伪元素的妙用

    本篇重点介绍CSS中的:befor.:after创建的伪元素几种使用场景,如填充文本.作为iconfont.进度线.时间线以及几何图形. 1. 介绍 1.1 说明 CSS中的:befor.:after ...

  5. CSS 基础 例子 伪元素和伪类 & 区别

    一.概念 CSS 伪类 -------向某些选择器添加特殊的效果,要达到同等效果,通过类来达到效果 CSS 伪元素     -------将特殊的效果添加到某些选择器,要达到同等效果,通过添加元素达到 ...

  6. 理解 CSS 中的伪元素 :before 和 :after

    CSS 的主要目的是给 HTML 元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上 CSS 中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”. 你一定 ...

  7. css中的伪元素,我今天记住了!o~yeah

    对于伪类和伪元素,我如果要区别它们,一般是使用css中的手册来区分,平常时候也没特意去记,需要用到时打开手册“哦,这个是伪元素,这个是伪类”,我个人觉的某些东西你把它存在网上,不一定要存在头脑中.带着 ...

  8. 前端 CSS的选择器 伪元素选择器

    介绍常用的伪元素. after用得比较多的 first-letter 用于为文本的第一个首字母设置样式. <!DOCTYPE html> <html lang="en&qu ...

  9. CSS中的伪元素选择器

    定义 伪元素选择器:就是有连续两个冒号的选择器,如::first-line::first- letter.::before 和::after E::first-letter文本的第一个单词或字(如中文 ...

随机推荐

  1. No module named django.core

    在虚拟环境中将django-admin.py startproject tango_with_django_project替换为django-admin startproject tango_with ...

  2. [NHibernate]存储过程的使用(三)

    目录 写在前面 文档与系列文章 查询 总结 写在前面 前面的文章介绍了在nhibernate中使用存储过程进行增删改的操作,当然查询也是可以的,在nhibernate中也可以执行任意的存储过程.本篇文 ...

  3. C#中Trim()、TrimStart()、TrimEnd()的用法

    string s = " from dual union all ";          s = s.Trim().TrimEnd("union all".To ...

  4. tyvj1011 传纸条

    背景 NOIP2008复赛提高组第三题 描述 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行n列的矩阵,而小渊和小轩被安排在矩阵对角线的两端, ...

  5. Linux C 中 fork() 函数详解

    一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源.fork() 函数通过系统调用创建一个与原来进程几乎完全相同的进程,也就是两个进程可以做完全相同的事,但如果初始参数或者传入的变量不同 ...

  6. 新语言代码高亮及Windows Live Writer插件开发

    最近在博客园做一些学习笔记.一个是看apple的swift官方书,另外一个是随学校课堂(SICP)学习scheme. 这两种语言都谈不上普及(或者说swift太新).博客园原来的windows liv ...

  7. shell--3.运算符

    1.注意 原生bash不支持简单的数学运算,但是可以用其它命令来实现如 awk 和expr ,expr最常用 val=`expr 2 + 3` echo "结果 ${val}" # ...

  8. java笔记--关于线程同步(7种同步方式)

    关于线程同步(7种方式) --如果朋友您想转载本文章请注明转载地址"http://www.cnblogs.com/XHJT/p/3897440.html"谢谢-- 为何要使用同步? ...

  9. SpringMVC上传文件的三种方式

    直接上代码吧,大伙一看便知 这时:commonsmultipartresolver 的源码,可以研究一下 http://www.verysource.com/code/2337329_1/common ...

  10. css3径向渐变详解-遁地龙卷风

    (-1)写在前面 我用的是chrome49,如果你用的不是.可以尝试换下浏览器前缀.IE在这方面的实现又特例独行了.不想提及-,这篇是为后续做准备. (0)快速使用 background-image: ...