CSS 中边框和凹槽样式的区别
CSS 边框样式设置元素四个边框的样式。
该属性可以有一到四个值。只有一个值时，该值将应用于所有四个边框；否则，这将作为每个边框-顶部样式、边框-右侧样式、边框-底部样式、边框-左侧样式的简写属性，其中每个边框样式都分配有单独的值。
此属性是以下 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 的一个边框样式的属性。它显示具有拉伸外观的边框。它是槽边框T5 风格的反面。效果取决于边框颜色值。它看起来好像是从画布里出来的。脊中的边框阴影位置是从左上开始的。它反转颜色值，使元素看起来凸起。
语法:
border-style: ridge;
示例:
超文本标记语言
<!DOCTYPE html>
<html>
<style>
h1.ridge {
border-width: 20px;
border-style: ridge;
border-color: #CC63FF
}
</style>
<body>
<h1 class="ridge">Ridge border style</h1>
<p>
<strong>Note</strong>
This effect depend on the border-color value.
</p>
</body>
</html>
输出:
凹槽边框样式:
这是 CSS 的一个边框样式的属性。它以雕刻的外观显示边框。它是岭风格的反面。效果取决于边框颜色值。它看起来就像是雕刻在画布上一样。(这通常是通过从比边框颜色稍亮和稍暗的两种颜色创建“阴影”来实现的)。岭中的边框阴影位置是从右下角开始的。它根据颜色值添加一个斜面，使元素看起来像是被压入了文档中。
语法:
border-style: groove;
示例:
超文本标记语言
<!DOCTYPE html>
<html>
<style>
h1.groove {
border-width: 10px;
border-style: groove;
border-color: #CC63FF
}
</style>
<body>
<h1 class="groove">Groove border style</h1>
<p>
<strong>Note</strong>
This effect depend on the border-color value.
</p>
</body>
</html>
输出:
结论:
- 当我们仔细观察这两个结果时，我们会发现在凹槽边框样式中，内边框的上边距和左边距是浅色的。内边框的右下边是深色的，在岭T4【边框式】正好相反。
- Groove 是一种 3D 效果，给人的印象是边框被雕刻到画布上。脊是一种 3D 效果，与凹槽的效果相反，在凹槽中，边框似乎从画布中突出。
版权属于：月萌API www.moonapi.com，转载请注明出处
