html – 边框脊和凹槽样式之间的差异

前端之家收集整理的这篇文章主要介绍了html – 边框脊和凹槽样式之间的差异前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想知道边框样式 – 脊和凹槽之间的区别.当我使用它们时,我无法发现两者之间的差异.我无法上传图像,因为我没有达到10级以使其更清晰.这是代码
border-style: groove ridge dashed groove;

解决方法

这是边境阴影位置:

Ridge: from top left
Groove: from bottom right

div {
  padding: 10px;
  margin: 10px;
  float: left;
  background-color: white;
}
.wrap {
  background-color: #ffdddd;
}
#ridge {
  border-width: 5px;
  border-style: ridge;
  margin-right: 1px;
}
#groove {
  border-width: 5px;
  border-style: groove;
  margin-left: 1px;
}
<div class="wrap">
  <div id="ridge">ridge</div>
  <div id="groove">groove</div>
</div>

猜你在找的HTML相关文章