如何使一个丰富多彩的渐变发光周围的输入框？ [英] How to make a colorful gradient glow around your input-box?

问题描述

我知道为了在盒子周围出现蓝色光芒，我们只需要将下面的代码应用到我们的CSS：

  .glowing-border {
 border：2px solid #dadada; 
 border-radius：7px; 
} 
 
 .glowing-border：focus {
 outline：none; 
 border-color：＃9ecaed; 
 box-shadow：0 0 10px＃9ecaed; 
} 
  

---

我的输入框到一个新的水平。

>

我希望它看起来像这样 - 而不是蓝色的光芒。
我想对它有一个很好的彩虹梯度效果。

有什么CSS专家在那里，认为这是可行的我吗？

---

不必是CSS，如果有人建议如何以不同的方式完成这项工作 -
请留下评论或回答。

解决方案

我想你可以使用两个额外的 divs 。一个是包装（也有背景渐变）与羽毛效果的白色内嵌框阴影，一个 div 后面有白色背景和外框的输入区域

我假设你形成的背景颜色是白色。

  .rainbowWrap {
 width：200px; 
 background：//你的渐变... 
 padding：4px; 
 box-shadow：inset 0px 0px 5px 3px white; 
 border-radius：2px; 
 position：relative; 
 z-index：1; 
} 
 
 .rainbowBg {
 width：184px; 
 height：15px; 
 background：white; 
 position：absolute; 
 top：10px; 
 left：10px; 
 box-shadow：0px 0px 7px 2px white，0px 0px 13px 2px white; 
 border-radius：4px; 
 z-index：2; 
} 
 
 .rainbow {
 width：186px; 
 background：transparent; 
 border：1px solid rgba（255,255,255,0.5）; 
 padding：5px; 
 border-radius：4px; 
 outline：none; 
 display：block; 
 position：relative; 
 z-index：500; 
 color：＃666; 
} 
  

请注意，我只写了代码， p>

小提琴： http://jsfiddle.net/b03acbdu/ 5 /

I know that for blue glow around the box, we just need to applied the code below to our CSS:

.glowing-border {
    border: 2px solid #dadada;
    border-radius: 7px;
}

.glowing-border:focus { 
    outline: none;
    border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;
}

---

Now I want to take my input-box to a next level.

I want it to look like this - rather than blue glow. I want to have a nice rainbow gradient effect on it.

Is there any CSS Expert out there and think that this is doable for me ?

---

Don't have to be CSS, if someone have any suggestion on how to get this done in a different way - please leave a comment or answer.

解决方案

I think you can do that by using two additional divs. One to be the wrap (also having the background gradient) with an white inset box shadow for the feather effect, and one div behind the input area with a white background and outer box shadow.

I assumed that you form background color is white.

.rainbowWrap {
    width: 200px;
    background: //your gradient...
    padding: 4px;
    box-shadow: inset 0px 0px 5px 3px white;
    border-radius: 2px;
    position:relative;
    z-index: 1;
}

.rainbowBg {
    width: 184px;
    height:15px;
    background: white;
    position:absolute;
    top: 10px;
    left: 10px;
    box-shadow: 0px 0px 7px 2px white, 0px 0px 13px 2px white;
    border-radius: 4px;
    z-index: 2;
}

.rainbow {
    width:186px;
    background:transparent;
    border:1px solid rgba(255,255,255,0.5);
    padding: 5px;
    border-radius: 4px;    
    outline:none;
    display: block;
    position:relative;
    z-index: 500;
    color:#666;
}

Note that I have only wrote code and only tested in Google Chrome.

Fiddle: http://jsfiddle.net/b03acbdu/5/

这篇关于如何使一个丰富多彩的渐变发光周围的输入框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！