边缘逐渐消失的盒子/边框

Question

边缘逐渐消失的盒子/边框

3

我正在尝试创建一个带有侧面和顶部“高亮”的框。

这个框的CSS非常简单，然而，现在我想要在设计中添加这个“高亮”，这就增加了CSS的复杂度...

我尝试了很多方法，不确定它们是否会有所帮助，但这是我最近尝试的:

/* Define the Main Navigation Drop Downs */
#mn_navigation .dd {position:relative;width:226px;padding:29px 0 0;background:transparent url("//beta.example.co.uk/_images/_global/dd_handle.png") no-repeat;z-index:1000;}
#mn_navigation .dd nav {padding:30px 0;background:#3E5032 url("//beta.example.co.uk/_images/_global/dd_bg.png");border-radius:3px;}
#mn_navigation .dd nav a {font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#fff !important;height:25px;line-height:25px;}

请注意，我已经发布了上面的内容以表明我实际上已经尝试自己解决这个问题。上面的代码可能甚至不能作为起点，因为可能需要重新构建HTML！

以下是当前的HTML（可能需要重构）：

<div id="dd_foo" class="dd">
    <nav>
        <a href="//beta.example.co.uk/menu/" title="LINK TITLE">LINK</a>
    </nav>
</div>

这里有一个可能的重组（类似于）：

以下是一种可能的重构方案：

<div id="dd_foo" class="dd">
    <div class="handle"><!-- Dropdown Handle --></div>
    <nav>
        <a href="//beta.example.co.uk/menu/" title="LINK TITLE">LINK</a>
    </nav>
</div>

这是我需要的下拉框样式（请注意顶部和侧面中间的淡白色边框）：

我还包含了该框分为其单独元素的版本（手柄和背景）。 Dropdown box

我认为可以通过巧妙地重叠和嵌套div来完成此操作，但理想情况下，我不想采用这种方法...有人能提出替代方案吗？

- Ben Carey

这需要支持特定的浏览器吗？还是只需要现代浏览器就可以了？ - hitautodestruct

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- hitautodestruct · Accepted Answer

最简单的方法

您可以尝试使用简单的盒子阴影来实现此目标：

.plaque {
    box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.32);

    /*...*/
}

一个例子

这里有一个在 jsbin 上使用 1 个 class 和一个 div 的例子。

复制粘贴代码

此代码仅适用于现代浏览器；它可能会导致 ie < 9 和其他不支持的浏览器爆炸。

.plaque:after {
  top: -9px;
  content: " ";
  height: 11px;
  width: 30px;
  position: absolute;
  pointer-events: none;
  left: 50%;
  margin-left: -15px;
  display: block;
  background-repeat: no-repeat;
}


.plaque {
  width: 250px;
  height: 100px;
  display: block;
  border: 0;
  outline: 0;
  padding: 12px 16px;
  line-height: 1.4;
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.32);
  border-radius: 5px;
  border: 1px solid transparent;
  font-family: sans-serif;
  color: white;
  font-size: 1.2em;
  text-overflow: ellipsis;
  position: relative;
  top: 6px;
}

/* Use whatever background you want */
.plaque { background-color: green; }

.plaque:after { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAcJJREFUeNqMUktPU0EU/mZuL6Up1RCjC4oRau4t4FJ84EKID/ZAjI9/6Mo/4MadG5dqJGjBatpyuY+2UNreeXDOBE0MNHGSSWZyzvnOd77zicdbd+EVJKyxGPSHmC4XIYSAMQYCoJhn81wJKSnHWhR8D1oZl69yhamiD8GBSefpywc2XKzjy7fP+PDuk5iUJxnksvvkxX1buxkgThOEt5exvr1qJ+XKy5CfvXpow9oSsn6GdqeF40EPK+GKY/ZfTNa3Vm1AI6TdFAeNfQgp0CKgrJehVg1AGl5gJLTWfxGfv15zI3BBnB5CehJGG5Cw8EjY6tw8KjNXsfv9K96//SguMOERgoU6+ic9NH8eQClNGzDQBMLb4FU1fzdxFB+hev0WNnbu2X802TxnkGQJoriNymwZHrFgAbhdidbOK+YTxR0ojLEc3sHmm0dOI8Gq10n9OI1xGLVcMvuGGYyHOYqlKcfK9wvOF3/i12ZvoFK+gsavPUgGSLsJkm4En4xDTqMi45iUZqZdd34zJY7L8was2enoGMHCEmS3l6LxYx9qrJ2I7FTNelBxPlKuYDgYu9nzUe6cenoygqF/J2o7AmcCDACumSjtgWp8aAAAAABJRU5ErkJggg==); }