Html 带有图像的虚线边框

发布于09月15日

我有一个周围有虚线边框的按钮.

我想在旗帜等其他元素上复制同样的虚线边框效果.但这一次，我希望这个虚线边框的 colored颜色与国旗相同.这并不像我想象的那么容易，因为旗帜可以在不同的区域有不同的 colored颜色 .因此，每个破折号都应该尊重国旗的 colored颜色 .使用下面的旗帜的示例.

也许图像边框应该可以做到这一点(将旗帜本身的图像用作边框图像源)，但我不知道如何继续.

.btn {
    background-color: black;
    border-radius: 50px;
    color: white;
    border: 1.5px dashed white;
    text-decoration: none;
    padding: 10px 15px;
    display: inline-block;
}

<a href="/contact" class="btn btn-outline-primary">Get In Touch</a>

我的try 是:

.btn {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  border: 4px dashed transparent;
  border-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/United-kingdom_flag_icon_round.svg/800px-United-kingdom_flag_icon_round.svg.png) 30 30 round;
  border-image-slice: 1;
}

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/United-kingdom_flag_icon_round.svg/800px-United-kingdom_flag_icon_round.svg.png" class="btn">

<style> .flag { width: 50vmin; height: 50vmin; border-radius: 50%; background-image: url(https://i.stack.imgur.com/642Gu.png); background-repeat: no-repeat; background-size: cover; background-position: center center; rborder: dashed black 1vmin; position: relative; } .flag::after { content: ''; position: absolute; width: calc(100% + 2px); aspect-ratio: 1; top: -1px; left: -1px; border-radius: 50%; border: dashed white 2vmin; box-sizing: border-box; } </style> <div class="flag"></div>

Html 带有图像的虚线边框

推荐答案

Html相关问答推荐

HTML图像无法正确放大和缩小规模

z—index总是 destruct 我的头，我该如何修复它？

在CSS中不保持圆形图像形状的边框半径属性

如何将FlexBox项目zoom 到其包含图像的大小

如何从卷轴中排除粘性元素？

Tailwind CSS：overflow-y Property Not Scrolling Unreliably to Bottom with top-[63px]

我怎样才能有一个div，在其中放置一个消息，打破和不go 的div？

使具有FLEX父项的溢出自动的子元素收缩

带有图标和悬停过渡的CSS按钮

旧文本淡出，但新文本不会淡入，而是突然出现

创建特定的CSS网格布局

为什么 Select 元素在带有数据绑定的Blazor上行为怪异？

柔性盒内的物品；t覆盖整个宽度，即使设置为100%

如何在悬停时更改同级元素 CSS

Tailwind 网格行高度可防止拉伸到最高行的所有相同高度

水平填充容器内的空间

对齐页面左侧的单选按钮

在随机图像下对齐文本

在 SQL 中合并 HTML 表中的单元格

本地 css 样式表未链接