加入收藏 | 设为首页 | 会员中心 | 我要投稿 威海站长网 (https://www.0631zz.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 运营中心 > 建站资源 > 优化 > 正文

45个值得收藏的CSS形状

发布时间:2019-04-23 20:13:12 所属栏目:优化 来源:前端小智
导读:CSS能够生成各种形状。正方形和矩形很容易,因为它们是 web 的自然形状。添加宽度和高度,就得到了所需的精确大小的矩形。添加边框半径,你就可以把这个形状变成圆形,足够多的边框半径,你就可以把这些矩形变成圆形和椭圆形。 我们还可以使用 CSS 伪元素

34.太空入侵者(电脑游戏名)

  1. #space-invader {  
  2. box-shadow: 0 0 0 1em red,  
  3. 0 1em 0 1em red,  
  4. -2.5em 1.5em 0 .5em red,  
  5. 2.5em 1.5em 0 .5em red,  
  6. -3em -3em 0 0 red,  
  7. 3em -3em 0 0 red,  
  8. -2em -2em 0 0 red,  
  9. 2em -2em 0 0 red,  
  10. -3em -1em 0 0 red,  
  11. -2em -1em 0 0 red,  
  12. 2em -1em 0 0 red,  
  13. 3em -1em 0 0 red,  
  14. -4em 0 0 0 red,  
  15. -3em 0 0 0 red,  
  16. 3em 0 0 0 red,  
  17. 4em 0 0 0 red,  
  18. -5em 1em 0 0 red,  
  19. -4em 1em 0 0 red,  
  20. 4em 1em 0 0 red,  
  21. 5em 1em 0 0 red,  
  22. -5em 2em 0 0 red,  
  23. 5em 2em 0 0 red,  
  24. -5em 3em 0 0 red,  
  25. -3em 3em 0 0 red,  
  26. 3em 3em 0 0 red,  
  27. 5em 3em 0 0 red,  
  28. -2em 4em 0 0 red,  
  29. -1em 4em 0 0 red,  
  30. 1em 4em 0 0 red,  
  31. 2em 4em 0 0 red;  
  32. background: red;  
  33. width: 1em;  
  34. height: 1em;  
  35. overflow: hidden;  
  36. margin: 50px 0 70px 65px;  
  37. }  

35.电视

  1. #tv {  
  2. position: relative;  
  3. width: 200px;  
  4. height: 150px;  
  5. margin: 20px 0;  
  6. background: red;  
  7. border-radius: 50% / 10%;  
  8. color: white;  
  9. text-align: center;  
  10. text-indent: .1em;  
  11. }  
  12. #tv:before {  
  13. content: '';  
  14. position: absolute;  
  15. top: 10%;  
  16. bottom: 10%;  
  17. right: -5%;  
  18. left: -5%;  
  19. background: inherit;  
  20. border-radius: 5% / 50%;  
  21. }  

(编辑:威海站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读