CSS中边框脊线和凹槽样式的区别

CSS 边框样式设置元素的四个边框的样式。

此属性可以具有一到四个值。只有一个值，该值将应用于所有四个边框；否则，这将用作每个border-top-style 、 border-right-style 、 border-bottom-style 、 border-left-style的速记属性，其中每个边框样式都分配有单独的值。

此属性是以下 CSS 属性的简写：

• 边框底部样式
• 左边框样式
• 右边框样式
• 边框样式

句法：

/* Keyword values */
border-style: groove;
border-style: ridge;

/* top and bottom | left and right */
border-style: dotted solid;

/* top | left and right | bottom */
border-style: hidden double dashed;

/* top | right | bottom | left */
border-style: none solid dotted dashed;

/* Global values */
border-style: inherit;
border-style: initial;
border-style: unset;

山脊边框样式：

它是CSS 的边框样式属性。它显示具有挤压外观的边框。它是凹槽边框的反面 风格。效果取决于边框颜色值。它看起来好像是从画布中出来的。脊中的边界阴影位置从左上角开始。它以一种使元素看起来凸起的方式反转颜色值。

句法：

border-style: ridge; 

例子：

HTML

    
  
  
   
Ridge border style
   

     Note 
     This effect depend on the border-color value.
   
  
  

输出：

凹槽边框样式：

它是CSS 的边框样式属性。它显示带有雕刻外观的边框。它与脊样式相反。效果取决于边框颜色值。它看起来好像是在画布上雕刻的。 (这通常是通过用比边框颜色稍浅和稍深的两种颜色创建“阴影”来实现的)。脊中的边界阴影位置从右下角开始。它根据颜色值添加斜角，使元素看起来压在文档中。

句法：

border-style: groove;

例子：

HTML

   
  
  
   
Groove border style
   

     Note 
     This effect depend on the border-color value.
   
  
  

输出：

结论：

• 当我们仔细查看这两个结果时，我们会发现在凹槽边框样式中，内边框的顶部和左侧边距较轻。内边框的右下边距是深色的，在山脊边框样式中，正好相反。
• Groove 是一种 3D 效果，给人的印象是边框被雕刻在画布上。 Ridge 是一种 3D 效果，具有与凹槽相反的效果，其中边框看起来从画布中突出。