css - 带填充的水平边框

标签 css

我想要一个没有任何嵌套元素的简单 div

<div class="border">čištění</div>

在元素内显示水平虚线边框(就像在填充内),像这样

enter image description here

有一个 outline-offset 属性,但它只接受一个长度值,并且还会出现垂直边框。有什么优雅的解决方案吗?

the suggested answer我看不到如何隐藏垂直边框。

最佳答案

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <style>
      .border {
        display: flex;
        align-items: center;
        justify-content: center;
        outline: 5px solid green;
        outline-offset: -5px;
        border-top: 10px dashed #fff;
        border-bottom: 10px dashed #fff;
        background-color: green;
        color: white;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="border">čištění</div>
  </body>
</html>

关于css - 带填充的水平边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73401365/

相关文章:

css - 完成后暂停 css 动画

css - ie7页脚停留在页面底部的问题

html - 如何限制一个div停留在另一个2 div的底部

html - 下拉菜单全部左对齐

java - 加载资源 css 文件失败。自由标记

html - 将鼠标悬停在 div 上时显示 div

jquery - 无法同时设置表格高度和 tr

html - 是否可以为具有相同类但不同标题标签的链接设置不同的样式?

html - 媒体查询无法正常工作

html - Semantic-UI Float right of an elem in Segment