如何在CSS中制作一个有轮廓但没有填充的框形阴影[duplicate]

axr492tv 于 2023-01-22 发布在其他

关注(0)|答案(1)|浏览(107)

- 此问题在此处已有答案**：

How to make a border overlay child div?（1个答案）
23小时前关门了。
我正在尝试将这个设计从Illustrator转换为普通HTML和CSS的UI元素（设计是一位设计师给我的，让我重新创建）。我需要带有青色和白色轮廓的内框可以点击，就像按钮一样，但不是围绕文本的外浅蓝色区域。

最初，我想我可以只使用框阴影来创建第二个偏移白色边框，但是框影只会显示在框的底部和右边，而不会显示在青色边框内。
我在想，也许我可以做另一个绝对定位的DIV来偏移它，但我不知道如何选择第二个DIV的大小，因为我希望这个按钮根据视口宽度缩放。
我该怎么做呢？我想避免将其保存为SVG或图像的选项，因为这样就很难创建"a"元素来只容纳带有可点击链接的文本部分。

css

来源：https://stackoverflow.com/questions/75189598/how-to-make-a-box-shadow-with-an-outline-but-no-fill-in-css

1条答案

按热度按时间

lfapxunr1#

你可以这样做：

button {
  font-size: 30px;
  padding: 10px 20px;
  border: solid #fff;
  border-width: 0 5px 5px 0;
  box-shadow:
    -5px -5px 0 cyan,
    -5px -5px 0 inset cyan,
     5px  5px 0 inset #fff;
  background: none;
  cursor: pointer;
}

body {
  background: lightblue;
}

<button>Click here </button>

赞(0）回复(0）举报 2023-01-22

我来回答

如何在CSS中制作一个有轮廓但没有填充的框形阴影[duplicate]

1条答案

相关问题

热门标签

最新问答