如何设置轮廓半径

编程问答 2022-06-07

问题描述

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

border-radius仅适用于边框。

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

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

enter image description here

解决方法

虽然我相信它是计划中的，但目前还不是，但是您可以用盒子阴影来模拟它。

.myElement {
  border: 2px solid #0064D2;
  border-radius: 3px;
  box-shadow: 0 0 0 2px #0099f8;
}
<div class="myElement">
  Hello World
</div>

,

不幸的是，无法添加轮廓半径，但是使用阴影框可以得到相同的结果。

.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>

htmloutlinesass