如何在CSS中创建凹底边框?

前端之家收集整理的这篇文章主要介绍了如何在CSS中创建凹底边框?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

内容需要能够在凹陷区域中滚动后面而不会被遮挡.具体来说,我正在尝试创建这个:

最佳答案
对于透明背景,您可以使用框阴影:

DEMO

说明:

这种技术的关键是使用具有盒阴影和透明背景的伪元素来透视它.伪元素被绝对定位并且具有比容器大得多的宽度,以便(借助于边界半径)给div的底部提供平滑的插入曲线.

简单来说:div的背景是伪元素的Box-shadow.

z-index值允许div的内容在阴影上显示.

******编辑*************************

随着形状背后的内容肆虐,你可以看到这个DEMO

  1. html,body{
  2. height:100%;
  3. margin:0;
  4. padding:0;
  5. background: url('http://lorempixel.com/output/people-q-c-640-480-1.jpg');
  6. background-size:cover;
  7. }
  8. div {
  9. background:none;
  10. height:50%;
  11. position:relative;
  12. overflow:hidden;
  13. z-index:1;
  14. }
  15. div:after {
  16. content:'';
  17. position:absolute;
  18. left:-600%;
  19. width:1300%;
  20. padding-bottom:1300%;
  21. top:80%;
  22. background:none;
  23. border-radius:50%;
  24. Box-shadow: 0px 0px 0px 9999px teal;
  25. z-index:-1;
  26. }

猜你在找的CSS相关文章