📌  相关文章
📜  如何使用 CSS 创建自相矛盾的效果？

📅  最后修改于: 2021-08-31 02:06:17             🧑  作者: Mango

矛盾效应是 div 或元素以圆形形式彼此顶部放置的效果。当您想要设计一个在悬停时打开的圆形按钮并且每个按钮分配一些任务并放置像彼此的顶部一样时，这种类型的效果非常有用。
在下面的示例中，我们将使用 z-index。像这样的放置需要是位置属性和顶部、左侧、右侧和底部属性的专家。然后，您可以轻松设计出矛盾的效果。

下面的例子说明了创建矛盾效应的方法：

示例 1： 



  

    Paradoxical effect by HTML and CSS
      
        

  

    

        
GeeksforGeeks

        
A Computer Science Portal for Geeks

        
Box1

        
Box2

        
Box3

        
Box4

    


  

输出：

示例 2： 



  

    
        Paradoxical effect
        by HTML and CSS
    
  
    

  

    

        
GeeksforGeeks

        

            A Computer Science Portal for Geeks
        

        

        

        

        

        

    


  

输出：