行间菜单栏效果

Question

如何制作线条内侧的这种效果？这是我要制作的菜单栏：http://i.stack.imgur.com/Mvuer.jpg I cant do the effect between the lines. This is my code: https://jsfiddle.net/ivailo/3q6ej7cc/4/

.button {
position: relative;
display: inline-block;
padding: .5em 1em;
font-size: 18px;
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
border: 1px solid rgba(122, 112, 82, 0.2);
color: #877B5A;
text-align: center;
text-decoration: none;
outline: none;
overflow: hidden;
border-radius: 7px;
}

.button::after {
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
color #fffff;
display: block;
content: '';
width: 15em;
height: 15em;
border-radius: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
transition: all 0s;
}

.button:hover::after {
box-shadow: inset 0 0 0 10em rgba(242, 189, 99, .2);
}

.button:hover {
color: #000000;
}

.button1 {
position: relative;
display: inline-block;
padding: .5em 1em;
font-size: 18px;
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
border: 1px solid rgba(122, 112, 82, 0.2);
color: #877B5A;
text-align: center;
text-decoration: none;
outline: none;
overflow: hidden;
border-radius: 7px;
}

.button1::after {
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
display: block;
content: '';
width: 15em;
height: 15em;
transform: translate(-50%, -50%);
transition: all 0s;
}

.button1:hover::after {
box-shadow: inset 0 0 0 10em rgba(242, 189, 99, .2);
}

.button1:hover {
color: #000000;
}

.theborder {
text-align: center;
width: 600px;
padding: 20px 25px;
}

.theborder:after {
content: "";
height: 1px;
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(160, 160, 160, .7) 50%, rgba(0, 0, 0, 0) 100%);
display: block;
margin: 10px 0px;
} 

.theborder:before {
content: "";
height: 1px;
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(160, 160, 160, .7) 50%, rgba(0, 0, 0, 0) 100%);
display: block;
margin: 10px 0px;
}

Answer 1

第一步：内发光

您可以使用弯曲阴影技巧的变体来实现此效果。这个技巧在这里解释：

http://nicolasgallagher.com/css-drop-shadows-without-images/demo/

但是我们可以：

而不是把阴影放在后面

让它变白
放在前面
在菜单上设置overflow: hidden来隐藏"shadow"我们不想看到的部分。

这会产生您想要的内部发光效果。

BODY {
  background-color: tan;
}

.menu {
  background-color: tan;
  width: 500px;
  height: 60px;
  position: relative;
  overflow: hidden;
}

.menu::before {
  content: "";
  position: absolute;
  top: -50%;
  bottom: 100%;
  left: 10%;
  right: 10%;
  border-radius: 50% / 30%;
  box-shadow: 0 0 50px rgba(255,255,255,0.8);
}

.menu::after {
  content: "";
  position: absolute;
  top: 100%;
  bottom: -50%;
  left: 10%;
  right: 10%;
  border-radius: 50% / 30%;
  box-shadow: 0 0 40px rgba(255,255,255,0.7);
}

<div class="menu">
</div>

如果从 menu 规则中删除 overflow: hidden，您可以更清楚地看到它是如何工作的。

第 2 步：淡化上边框

为此，我们只需在顶部添加一个新的 <div> 元素，该元素的高度为 1 像素，背景为 CSS 渐变。

最终结果：

BODY {
  background-color: tan;
}

.menu {
  background-color: tan;
  width: 500px;
  height: 60px;
  position: relative;
  overflow: hidden;
}

.menu::before {
  content: "";
  position: absolute;
  top: -50%;
  bottom: 100%;
  left: 10%;
  right: 10%;
  border-radius: 50% / 30%;
  box-shadow: 0 0 50px rgba(255,255,255,0.8);
}

.menu::after {
  content: "";
  position: absolute;
  top: 100%;
  bottom: -50%;
  left: 10%;
  right: 10%;
  border-radius: 50% / 30%;
  box-shadow: 0 0 40px rgba(255,255,255,0.7);
}

.topborder {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 25%,rgba(0,0,0,0.5) 75%,rgba(0,0,0,0) 100%);
}

<div class="menu">
  <div class="topborder"></div>
</div>

注意： 在上面的两个示例中，我通过使用无前缀的 CSS 属性简化了事情。这些应该至少适用于最新的 Chrome 和 FF。但是如果你需要支持旧的浏览器版本，你也应该添加 CSS 属性的前缀版本。

例如，对于渐变，您可能想要添加 -moz-linear-gradient 和 -webkit-linear-gradient，以及旧版本 IE 的后备过滤器渐变。

参见：full version of this gradient

行间菜单栏效果

menu bar effect between the lines

css

menubar