纯css设置气泡

最新推荐文章于 2023-05-08 19:18:56 发布

ajume28228

最新推荐文章于 2023-05-08 19:18:56 发布

阅读量216

点赞数

原文链接：http://www.cnblogs.com/aricse/p/6726840.html

版权

 
  /*css代码*/ 
 
 
  /* poptip */ 
 
 
  .poptip{ 
  position 
  :  
  absolute 
  ; 
  top 
  :  
  20px 
  ; 
  left 
  : 
  20px 
  ; 
  padding 
  :  
  6px 
  10px 
  5px 
  ;* 
  padding 
  :  
  7px 
  10px 
  4px 
  ; 
  line-height 
  :  
  16px 
  ; 
  color 
  :  
  #DB7C22 
  ; 
  font-size 
  :  
  12px 
  ; 
  background-color 
  :  
  #FFFCEF 
  ; 
  border 
  :  
  solid 
  1px 
  #FFBB76 
  ;border-radius:  
  2px 
  ;box-shadow:  
  0 
  0 
  3px 
  #ddd 
  ;} 
 
 
  .poptip-arrow{ 
  position 
  :  
  absolute 
  ; 
  overflow 
  :  
  hidden 
  ; 
  font-style 
  :  
  normal 
  ; 
  font-family 
  : simsun; 
  font-size 
  :  
  12px 
  ; 
  text-shadow 
  : 
  0 
  0 
  2px 
  #ccc 
  ;} 
 

     
 
 
  .poptip-arrow em,.poptip-arrow i{ 
  position 
  :  
  absolute 
  ; 
  left 
  : 
  0 
  ; 
  top 
  : 
  0 
  ; 
  font-style 
  :  
  normal 
  ;} 
 
 
  .poptip-arrow em{ 
  color 
  :  
  #FFBB76 
  ;} 
 
 
  .poptip-arrow i{ 
  color 
  :  
  #FFFCEF 
  ; 
  text-shadow 
  : 
  none 
  ;} 
 

     
 
 
  .poptip-arrow- 
  top 
  ,.poptip-arrow- 
  bottom 
  { 
  height 
  :  
  6px 
  ; 
  width 
  :  
  12px 
  ; 
  left 
  : 
  12px 
  ; 
  margin-left 
  : 
  -6px 
  ;} 
 
 
  .poptip-arrow- 
  left 
  ,.poptip-arrow- 
  right 
  { 
  height 
  :  
  12px 
  ; 
  width 
  :  
  6px 
  ; 
  top 
  :  
  12px 
  ; 
  margin-top 
  : 
  -6px 
  ;} 
 

     
 
 
  .poptip-arrow- 
  top 
  { 
  top 
  :  
  -6px 
  ;} 
 
 
  .poptip-arrow- 
  top 
  em{ 
  top 
  :  
  -1px 
  ;} 
 
 
  .poptip-arrow- 
  top 
  i{ 
  top 
  :  
  0px 
  ;} 
 

     
 
 
  .poptip-arrow- 
  bottom 
  { 
  bottom 
  :  
  -6px 
  ;} 
 
 
  .poptip-arrow- 
  bottom 
  em{ 
  top 
  :  
  -8px 
  ;} 
 
 
  .poptip-arrow- 
  bottom 
  i{ 
  top 
  :  
  -9px 
  ;} 
 
 
  .poptip-arrow- 
  left 
  { 
  left 
  : 
  -6px 
  ;} 
 
 
  .poptip-arrow- 
  left 
  em{ 
  left 
  : 
  1px 
  ;} 
 
 
  .poptip-arrow- 
  left 
  i{ 
  left 
  : 
  2px 
  ;} 
 
 
  .poptip-arrow- 
  right 
  { 
  right 
  : 
  -6px 
  ;} 
 
 
  .poptip-arrow- 
  right 
  em{ 
  left 
  : 
  -6px 
  ;} 
 
 
  .poptip-arrow- 
  right 
  i{ 
  left 
  : 
  -7px 
  ;} 
 

     
 
 
  /*html结构*/ 
 
 
  <div class= 
  "poptip" 
  > 
 
 
       
  <span class= 
  "poptip-arrow poptip-arrow-top" 
  ><em>◆</em><i>◆</i></span> 
 
 
       
  <span class= 
  "poptip-arrow poptip-arrow-right" 
  ><em>◆</em><i>◆</i></span> 
 
 
       
  <span class= 
  "poptip-arrow poptip-arrow-bottom" 
  ><em>◆</em><i>◆</i></span> 
 
 
       
  <span class= 
  "poptip-arrow poptip-arrow-left" 
  ><em>◆</em><i>◆</i></span> 
 
 
       
  注销 
 
 
  </div> 
 