如何设置轮廓的半径

Question

我想在我的元素上使用一些半径的边框和轮廓。

border-radius 仅适用于边框。

有没有办法在轮廓上也应用半径？

.myElement {
    border: 2px solid #0064D2;
    outline: 2px solid #0099F8;
    border-radius: 3px;
}

Answer 1

遗憾的是，无法添加轮廓半径，但您可以使用框阴影获得相同的结果。

.myElement {
  width: 200px;
  height: 100px;
  border: 3px solid #0064d2;
  box-shadow: 1px 1px 0px 5px #c70707;
  border-radius: 3px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="main.css">
  <title>Document</title>
</head>

<body>
  <div class="myElement"></div>
</body>

</html>

Answer 2

目前还没有，虽然我相信这是计划中的，但你可以用 box-shadow 来模拟它。

.myElement {
  border: 2px solid #0064D2;
  border-radius: 3px;
  box-shadow: 0 0 0 2px #0099f8;
}

<div class="myElement">
  Hello World
</div>

如何设置轮廓的半径

How to set radius for outline

html

css

sass

outline