20个非常实用的CSS技巧

2020-05-11 18:10:33易采站长站整理

</div>  
  

CSS:

CSS Code复制内容到剪贴板

.test3 span {   
  position: relative;   
}   
.test3 span a {   
  position: relative;   
  z-index: 2;   
}   
.test3 span a:hover, .test3 span a:active {   
  z-index: 4;   
}   
.test3 span input {   
  background: transparent;   
  border: 0;   
  cursor: pointer;   
  position: absolute;   
  top: -1px;   
  left: 0;   
  width: 101%;  /* Hacky */  
  height: 301%; /* Hacky */  
  z-index: 3;   
}   
.test3 span input:focus {   
  background: transparent;   
  border: 0;   
  z-index: 1;   
}   
  

16. CSS 写出三角形

利用border来写三角形代码,并且兼容IE6.

CSS Code复制内容到剪贴板

/* create an arrow that points up */  
div.arrow-up {   
  width:0px;   
  height:0px;   
  border-left:5px solid transparent;  /* left arrow slant */  
  border-right:5px solid transparent; /* right arrow slant */  
  border-bottom:5px solid #2f2f2f; /* bottom, add background color here */  
  font-size:0px;   
  line-height:0px;   
}   
    
/* create an arrow that points down */  
div.arrow-down {   
  width:0px;   
  height:0px;   
  border-left:5px solid transparent;   
  border-right:5px solid transparent;   
  border-top:5px solid #2f2f2f;   
  font-size:0px;   
  line-height:0px;   
}   
    
/* create an arrow that points left */  
div.arrow-left {   
  width:0px;   
  height:0px;   
  border-bottom:5px solid transparent;  /* left arrow slant */