Question

我正在尝试复制Google日历的设计，单击时其文本输入框如下所示： https://ibb.co/6Hqrnt4

但是我创建的内容如下所示： https://ibb.co/HprQ125

我的代码就像

.element{
  border-radius: 2px;
  border: none;
  border-bottom: 2px solid;
}

如您所见，我的底部边框在结尾处被打发了。 Google日历的对应项不是。我注意到底部边框并不完全适合原始的灰色框（在图像中放大），但这并不重要。我该如何实现？

Answer 1

在移动设备上，只需在这里猜测一下即可。也许该按钮位于具有底部边框和较小边框半径的div内

const operationEvaluator = operation => {

  let left = (typeof operation.left === "number") ? operation.left : operationEvaluator(operation.left),
    right = (typeof operation.right === "number") ? operation.right : operationEvaluator(operation.right);

  switch (operation.op) {
    case "*":
      return left * right
    case "/":
      return left / right
    case "+":
      return left + right
    case "-":
      return left - right
  }
}

var op1 = { left: 5, op: '-', right: { left: 3, op: '*', right: { left: 8, op: '-', right: { left: 200, op: '/', right: 5 } } } },
op2 = { left: { left: 10, op: '*', right: { left: 2, op: '+', right: 1, }, }, op: '+', right: { left: 5, op: '*', right: { left: 1, op: '-', right: { left: 1, op: '+', right: 2 } } } };


console.log(operationEvaluator(op1))
console.log(operationEvaluator(op2))

Answer 2

您可以通过在新元素上添加蓝色边框来做到这一点。

.grey-box {
  width: 100px;
  height: 50px;
  display: block;
  background-color: #f1f1f1;
  border-radius: 5px;
}

.blue-line {
   display: block;
   width: 100px;
   border-bottom: 5px solid blue;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
}

<div class="grey-box"></div>
<span class="blue-line"></span>

如何创建不受边框半径影响的上直底部边框

2 个答案: