Question

如何在线条的内侧产生这种效果？这是我想要制作的菜单栏：http://i.stack.imgur.com/Mvuer.jpg我无法在线条之间起作用。这是我的代码：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

第1步：内部发光

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

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

但我们可以：

而不是把影子放在后面

使它成为白色
留在前面
在菜单上设置overflow: hidden以隐藏我们不想看到的“影子”部分。

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

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>

如果您从overflow: hidden规则中删除menu，则可以更清楚地了解其工作原理。

第2步：褪色的上边框

为了做到这一点，我们可以在顶部添加一个新的<div>元素，高度为1px，并具有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

菜单栏之间的效果线

1 个答案: