可自定箭头款式的CSS3气泡提醒框

日期:2021-03-04 类型:科技新闻 

关键词:秀米制作h5,h5如何制作,h5小游戏制作,h5游戏开发,免费的h5制作网站

1款根据纯CSS的气泡提醒框,全部提醒框由箭头和矩形框框构成,而且气泡提醒框的箭头能够有不一样的方位。

线上预览    源代码免费下载

完成的编码。

css编码:

CSS Code拷贝內容到剪贴板
  1. .arrow_box {   
  2.     positionrelative;   
  3.     background#88b7d5;   
  4.     border4px solid #c2e1f5;   
  5. }   
  6. .arrow_box:after, .arrow_box:before {   
  7.     bottombottom: 100%;   
  8.     left: 50%;   
  9.     bordersolid transparent;   
  10.     content" ";   
  11.     height: 0;   
  12.     width: 0;   
  13.     positionabsolute;   
  14.     pointer-events: none;   
  15. }   
  16.     
  17. .arrow_box:after {   
  18.     border-color: rgba(136, 183, 213, 0);[......]   
  19.   

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助。

上一篇:收购粉末状建筑涂料 返回下一篇:没有了