Question

我正在尝试使用CSS创建一个完美的斜角边框。

基本上，我需要稍微抬起边框并使用渐变色。

我遇到的问题是我使用的是/sr，因为那是我能找到的最接近但是颜色/渐变不是很好而且斜角风格也不是那么好。

在角落处有一条线，半径较浅，颜色较浅，颜色较深！

这是一个有效的FIDDLE

使用CSS有没有更好的方法呢？

任何帮助都将不胜感激。

编辑：

这是css代码：

border-style:ridge;

Answer 1

如果您想要渐变边框，可以使用外部div上的内部div和渐变背景来实现更清晰的边框效果。这应该会给你想要的效果。请记住你去过那个半径，内半径需要略微减小，以保持“边界”的宽度在它上面保持一致。您可能需要在浏览器中略微使用它。在Chrome＆amp; FF / Mac。

https://jsfiddle.net/treetop1500/nL4t9jLw/

.ttle {
  background: red;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#c2924e, #7c5b2d);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#c2924e, #7c5b2d);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#c2924e, #7c5b2d);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#c2924e, #7c5b2d);
  /* Standard syntax */
  width: 90%;
  height: auto;
  padding: 5px;
  border-bottom-left-radius: 3em;
  border-top-right-radius: 3em;
  background-color: #000;
}
.inner {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: none;
  width: 100%;
  height: auto;
  padding: 10px;
  min-height: 150px;
  border-bottom-left-radius: 2.8em;
  border-top-right-radius: 2.8em;
  background-color: #000;
}

<div class="ttle">
  <div class="inner">

  </div>
</div>

Answer 2

if (a - b == 0)
   return true;

CSS：渐变的斜角边框？

2 个答案: