我们知道,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. Maven个人手册

    一.Maven基本使用与设置 1.安装maven插件 1).下载maven并解压到指定目录,到该目录下复制当前路径path 2).在eclipse的dropins目录下编辑maven.link,将ma ...

  2. todoList使用教程

    网页链接:http://www.cnblogs.com/sunada2005/articles/2663030.html

  3. 【Go入门教程5】面向对象(method、指针作为receiver、method继承、method重写)

    前面两章我们介绍了函数和struct,那你是否想过函数当作struct的字段一样来处理呢?今天我们就讲解一下函数的另一种形态,带有接收者(receiver)的函数,我们称为method method ...

  4. Mac Pro 安装 Sublime Text 3,个性化设置,主题 和 插件 收藏

    1.到官网下载安装包 http://www.sublimetext.com/3 2.附注册码一枚 Sublime Text 3 3126 —– BEGIN LICENSE —– Alexey Plut ...

  5. iOS 多个异步网络请求全部返回后再执行具体逻辑的方法

    对于dispatch多个异步操作后的同步方法,以前只看过dispatch_group_async,看看这个方法的说明: * @discussion * Submits a block to a dis ...

  6. NSString 初始化方法的内存比较

    NSString *str1 = @"hello"; NSString *str2 = @"hello"; NSString *str3 = [NSString ...

  7. Error:identifer “blockIdx” and __syncthreads() undefined

    #include "device_launch_parameters.h" for blockIdx #include "device_functions.h" ...

  8. 网络编程之addrinfo

    addrinfo结构体定义如下: typedef struct addrinfo { int ai_flags;//指示在getaddrinfo函数中使用的选项的标志. int ai_family; ...

  9. Unix系统引导过程(简单步骤)

    1.从MBR中读取引导加载程序(boot loader) 2.初始化内核 3.硬件检测 4.创建内核进程 5.系统管理员干预(仅仅在进入单用户模式或者恢复模式的时候) 6.执行系统启动脚本

  10. Power BI FAQ

    关于Power BI,最近一直想写点什么,但是也想不到写什么.直到前几天,有个朋友在qq加我,问了我好几个问题,我发现都是一些很有代表性的问题,所以都记录了下来,特意整理了一下分享出来,希望能帮到更多 ...