.column{
position: relative;
float: left;
padding: 30px 0;
width: 25%;
z-index: 0;
background-color: orange;
text-align: center;
} .button:before,.button:after{
content: '';
position: absolute;
} .button:before{
top: -5px;
bottom: -5px;
left: -5px;
right: -5px;
z-index:-1;
border-radius: 9px;
} .button.red:before{
background: #d02e17;
background-image: linear-gradient(to bottom, #b32511, #ffffff); } .button {
display: inline-block;
position: relative;
height: 33px;
line-height: 33px;
background-image: linear-gradient(to bottom,#e74a29 0%, #e6451b 50%, #d02e17 50%, #b3150b 100%);
border: #000000 1px dotted;
box-shadow: 0 2px 1px rgba(0,0,0,0.25);
}

  其中将.button:before 的z-index = -1;是因为.button 和.button的伪类(新加的一个Box)为同一级的,而.button 默认为0,修改其中的z-index其实修改的是子元素的z-Index,所以无论怎样修改,.button中的元素也会在伪类的下面,因此只能修改伪类的z-index;  而将.column的z-index设为0,其实是postion为relative时,设置z-index,才会将其加入context-stack,

给伪类设置z-index= -1;的更多相关文章

  1. CSS动态伪类选择器温故-3

    动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...

  2. css常用伪类记录

    1.超链接使用css伪类设置颜色 a:link {color: #000000} /* 未访问的链接 */a:visited {color: #d90a81} /* 已访问的链接 */a:hover ...

  3. css伪类选择器详细解析及案例使用-----伪类选择器(1)

    动态伪类选择器:E:link :选择匹配的E元素,并且匹配元素被定义了超链接并未被访问过.E:visited :选择匹配的E元素,而且匹配的元素被定义了连接并已被访问过.E:active :选择匹配的 ...

  4. css中的伪类

    伪类用于向某些选择器添加一些特殊效果. 1):focus 伪类在元素获得焦点的时向元素添加特殊样式.一般用于输入文本域,按钮,以及超链接. a:focus{color:red;}超链接字体为红色 in ...

  5. html5表单和伪类

    type = "email"; 自带验证格式type = "url"; 网址 http//:type = "tel";移动端会变成数字键盘t ...

  6. 【CSS】伪类和伪元素选择器

    伪类 基于当前元素所处的状态或具有的特性,用于设置元素自身的特殊效果. a:link  规定所有未被点击的链接: a:visited  匹配多有已被点击过的链接: a:active  匹配所有鼠标按下 ...

  7. 理解css伪类和伪元素

    伪类就是可以通过直接添加一个类样式达到同等效果,而伪元素,则需要先添加一个元素,然后在元素上添加样式才能达到同等效果 伪类 :active 向被激活的元素添加样式. :focus 向拥有键盘输入焦点的 ...

  8. 理解使用before,after伪类实现小三角形气泡框

    先来理解before和after伪类的用法吧,before从字面上的意思可以理解为前面的意思,它一般和content属性一起使用,把内容插入在其他元素的前面,同理after的含义就是把内容插入到其他元 ...

  9. CSS动态伪类选择器温故

    动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...

随机推荐

  1. matlab 自动阈值白平衡算法 程序可编译实现

    一种效果很好的自动白平衡技术(WhiteBalance) 白平衡是图像处理的一个极重要概念.所谓白平衡(英文名称为White Balance),就是对白色物体的还原.当我们用肉眼观看这大千世界时,在不 ...

  2. bzoj题解汇总(1021~1031)

    bzoj1021:普通dp bzoj1022:裸的Anti-Nim 必胜:①sg=0且所有不超过1 ②sg>1且存在至少一个超过1 bzoj1023:http://www.cnblogs.com ...

  3. js时间显示设置

    //对日期中部分小于10的数字前边添加0 function zero(s){ return s < 10 ? '0' + s: s; } var date=new Date(), year = ...

  4. NCrawler 学习

    NCrawler是一款国外的开源网络爬虫软件,遵循LGPL许可协议.其HTML处理使用的是htmlagilitypack开源库,采用xpath的方式处理定位网页元素,十分方便.同时其采用HttpWeb ...

  5. C++ 如何重复利用一个内存地址块

    #include<iostream> using namespace std; ; }; int main(int argv ,char * args[]) { double *p1,*p ...

  6. Remove Duplicates from Sorted Array [LeetCode]

    Given a sorted array, remove the duplicates in place such that each element appear only once and ret ...

  7. SQL批量删除与批量插入

    批量删除: DELETE FROM MyTable WHERE ID IN (1,2); 批量插入: INSERT INTO MyTable(ID,NAME) VALUES(1,'123');INSE ...

  8. Div样式查看器

    编写div属性时,经常需要尝试不同的样式,可以用Javascript写一个简单的div样式查看器,方便日常操作: <!DOCTYPE html> <html> <head ...

  9. MongoDB 一对多关系建模

    转文: 本篇博客翻译自: http://blog.mongodb.org/post/87200945828/6-rules-of-thumb-for-mongodb-schema-design-par ...

  10. jquery中ajax常用方法

    index.html: <h3>$.get(url, [data], [callback], [type])<br/> $.post(url, [data], [callbac ...