关于伪类元素:before和:after

时间  2019-11-20
标签 关于 元素 繁體版
原文   原文链接

实现气泡效果css

首先定义一个html

<p class="speech"></p>

 

先给外层的容器添加样式：web

复制代码 
p.speech
{
position: relative;
width: 200px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: #fff;
border: 8px solid #666;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 2px 2px 4px #888;
-moz-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
}
复制代码

 

没有什么特别复杂的，主要的核心就在postion:relative，用来定位对话浮层的。咱们还须要一些Mozilla和webkit的属性来完成圆角和阴影，IE8如下的浏览器看不到这些属性，只是显示一个框，不影响整体的效果。浏览器

咱们如今须要建立对话浮层下面的那个三角形的指向标志了。不使用图片，咱们使用CSS边框来完成这个效果。看看下面这个用不一样颜色边框完成的效果。函数

咱们把高度和宽度减小到0px，而后给边框使用不一样的大小，看看效果：post

为了最后能作成指示标志的样子，咱们把上边距和左边距设置为solid，下边距和右边距设置为透明：测试

可是咱们把这个放哪呢？还好，咱们可使用CSS的伪类:before和:after来生成，因此：字体

复制代码 
p.speech:before
{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 30px;
top: 100px;
border: 25px solid;
border-color: #666 transparent transparent #666;
}
复制代码

 

如今三角形的标识就定位在咱们的气泡下面了。另外，不要费事去考虑这个元素的阴影，他会定位在透明边界的旁边，而不是看到的图形的旁边。url

咱们还须要移除三角形的一部分。咱们能够在里面放置一个白色的小三角形来达到这个效果。spa

复制代码 
p.speech:after
{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 38px;
top: 100px;
border: 15px solid;
border-color: #fff transparent transparent #fff;
}
复制代码

 

咱们的不使用图片的对话气泡就完成了：

 

另外，咱们还可使用:before和:after伪类来作不少其余的事情，好比，一个思考气泡也能够经过这样办法完成：

首先也是建一个

 

 
 
<p class="thought">I think...</p>
 

 

 

css代码：
 

 
 
 
  复制代码 
 
 
 
p.thought{
position: relative;
width: 130px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: #fff;
border: 8px solid #666;
-webkit-border-radius: 58px;
-moz-border-radius: 58px;
border-radius: 58px;
-webkit-box-shadow: 2px 2px 4px #888;
-moz-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
}


p.thought:before, p.thought:after{
content: '';
position: absolute;
left: 10px;
top: 70px;
width: 40px;
height: 40px;
background-color: #fff;
border: 8px solid #666;
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
border-radius: 28px;
z-index:5;
}

p.thought:after{
position: absolute;
width: 20px;
height: 20px;
left: 5px;
top: 100px;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
z-index:6;
}
 
 
 
  复制代码 
 
 

 

最新实现效果：
 

 

CSS中有一个特性容许咱们添加额外元素而不扰乱文档自己，它们是以CSS选择器的形式出现的，具备标签的表现效果，可是呢又不是真正的标签元素，因此叫作“伪元素”。下面就说一下常见的两个伪元素before和after。
 

 
 

1、伪元素基本用法
 

 
 

     在CSS选择器中加上相应伪类选择符就能够了，像这样：#example: before或者#example: after，这里是使用ID选择器，好比下面的CSS代码：
 

 
 
#example:before {
  content: "\"";
}
#example:after {
  content: "\"";
}
 

 

 
 

它的效果就是为example标签先后加上双引号。
 

      和伪类的选择符很像，可是有一点小区别，就是伪类选择符其实是用两个冒号，::before的形式，以和伪类区别开，可是只用一个冒号浏览器也是能够识别的，在CSS3中规定是一个冒号就能够了。
 

      若是没有绑定标签，像这样：:before{ content:”=”;} 这样的伪元素是没有意义的,代码会在DOM里的每一个元素的内容以前插入散列符号。即便你删除了<body>标签和它的全部内容，你仍会在页面上看见两个散列符号：一个在<html>里，另外一个在<body>标签里。
 

      那么可不能够给伪元素再添加伪元素呢？好比下面这个代码：
 

 
 
#example:after:after{
    content: "after";
}
 

 

 
 

      在浏览器中刷新，测试一下会发现什么也没有显示，也就是说再给伪元素添加伪元素目前不少浏览器上是无效的，浏览器忽略掉该定义，只能识别一层伪元素，可是既然能够伪元素添加伪元素，能够期待再为伪元素添加伪元素，其表现力是很强的。
 

2、伪元素属性和样式
 

1.content属性
 

      每一个伪元素必需要有content属性，不然的话浏览器不能识别，你能够为content属性添加空引用做为它的值(即:content:“”)。
 

      你也能够为content包含一个指向一个图像的URL，就像在css里包含一个背景图像同样：
 

 
 
p:before {

  content: url(image.jpg);
}
 

 

 
 

      也能够包含一个Data URI代替图像引用，就像使用css背景同样。
 

      你还能够选择ATRR(X)中的函数的形式。“把X属性的值以字符串的形式返回”，好比：
 

 
 
a:after {
  content: attr(href);
}
 

 

 
 

      attr()函数的功能是把获得特定属性的值并把它做为插入的文本成为一个伪元素。
 

      上面的代码会致使页面上的每个<a>元素的href值当即被放置在每一个各自的<a>元素的后面。在文档被打印时，它能够用做一个包含全部URl的打印样式表。
 

2.标签属性
 

      伪元素也是元素，因此你能够为它添加大部分其余元素具备的属性，好比定位属性，字体属性，背景属性和盒模型的属性等，另外因为伪元素默认是内联元素，因此若是要使得盒模型中的height等属性有效的话，必需要把它转化为块元素，具体就是设置其display属性为block,或者设置为float等。以下：
 

 
 
 
  复制代码 
 
 
 
#example:after{
    position: absolute;
    display: block;
    left: 20px;
    top: 20px;
    content: "\"";
    width: 20px;
    height: 20px;
    background: #6F3;
}
 
 
 
  复制代码 
 
 

 

      既然伪元素能够定义position等属性，那么before和after的约束就颇有限了，before和after的区别只能是在没有特殊定义伪元素的位置等信息的时候的默认行为不一致，before出如今相对绑定的元素以前，而after出如今相对绑定的元素位置以后。
 

      另外既然能够为伪元素定义盒子模型的属性，就不得不说，伪元素默认为其目标元素的子元素，好比#example:after，伪元素after的父元素就是#example选择符对应的元素，它具备通常子元素盒模型的特性，即为他定义的height和width等属性规则为影响目标元素的规则。
 

3、伪元素的兼容性
 

基本能够放心的使用伪元素，由于它有很好的兼容性，能够不用加浏览器前缀而很好的使用它。
 

支持:before 和 :after 伪元素的浏览器有：
 

     
 
  • Chrome 2+,
    •  
 
  • Firefox 3.5+ (3.0 had partial support),
    •  
 
  • Safari 1.3+,
    •  
 
  • Opera 9.2+,
    •  
 
  • IE8+ (with some minor bugs),
    •  
 
  • 几乎全部的移动浏览器。
    •  

 

      可是IE6和IE7上并不支持，若是不是很在乎他们的用户数量的话，基本能够很自由的使用啦。
 

4、伪元素的做用
 

     这里借用Thoriq Firdaus的几个例子简单说一下伪元素的用法。另外伪元素既然是伪元素，那么做为结构与表现分离的一种实现，其做用应该是对文本起到很好的修饰做用，而不是把它用来表现文本。
 

阴影效果
 

使用 伪元素:before 和 :after 。它们两个都是绝对定位，并且使用负z-index来放置到图片后方实现阴影效果。
 

fascinating-shadows8
 

3D按钮
 

利用伪元素结合CSS3 box-shadow 来绘制一个使人吃惊的3D按钮，仅仅使用了CSS和单一的锚文本。伪元素:before 被用来在按钮的左侧添加数字“1”。
 

3d-button9
 

叠加图像效果
 

使用伪元素来仅仅依靠一个图片标签建立一个“凌乱的”叠加图像效果也是可能的。伪元素用于创建一个图片叠加的错觉，经过使用z-index负值使“叠加”的图片在真正的图片后面来实现。
 

stacked-image10


        

            

        	





    

		

            
相关文章