如何使用 CSS 创建 3D 脊线边框？

在 CSS 中， border-style属性用于设置元素边框的线条样式。

边框样式属性可能有一个、两个、三个或四个值。当指定值为 1 时，相同的样式应用于所有四个边。当指定值为二时，第一个样式应用于顶部和底部，第二个样式应用于左侧和右侧。当指定值为 3 时，第一个样式应用于顶部，第二个样式应用于左侧和右侧，第三个样式应用于底部。当指定值为 4 时，第一个样式应用于顶部，第二个样式应用于右侧，第三个样式应用于底部，第四个值应用于左侧。

Ridge： Ridge 是一种边框样式，显示具有挤压外观的边框。它与凹槽相反。`

句法：

border-style: ridge;

方法：在这个例子中，我们将脊状边界赋予标题h1 。您可以看到在样式部分我们分配了一个 边框样式值ridge ，它将为标题h1提供 3D 山脊边框。

例子：

HTML

  

    
    

  

    

        Welcome To GeeksforGeeks
    
Ridge Border Style
    
Note: 
        This effect depend on the border-color value.

  

输出：

山脊边框样式