Question

我正在制作我的html表单，我想在其上添加效果。

<input name="" type="text" class="" />是否可以产生发光效果？

提交按钮是否也可以产生这种效果？

Answer 1

这适用于班级按钮的所有输入

input.Button {
-moz-box-shadow: 0px 0px 10px Green;
-webkit-box-shadow: 0px 0px 10px Green;
box-shadow: 0px 0px 10px Green;
}

Per @Imoda

这适用于文本类型的所有输入

input[type='text'] {
  -moz-box-shadow: 0px 0px 4px #ffffff;
  -webkit-box-shadow: 0px 0px 4px #ffffff;
  box-shadow: 0px 0px 4px #ffffff;
}

只有在悬停时才能获得它：

input[type='text']:hover {
  -moz-box-shadow: 0px 0px 4px #ffffff;
  -webkit-box-shadow: 0px 0px 4px #ffffff;
  box-shadow: 0px 0px 4px #ffffff;
}

Answer 2

您可以通过Photoshop或Fireworks创建对象或艺术作品，然后使用CSS文件将该图形导入到开发中。例如：

div#btn {
background-position: top right;
position:absolute; */
margin:0px 0px; padding:0px;
text-align:center;
background-image: url(images/bg1.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
}

然后在您的HTML中，只需在按钮上调用该div。

Answer 3

这将选择“文本”类型的输入。然后将#FFFFFF更改为您想要的任何颜色。理论上这应该有效。如果没有，请在每个冒号后直接添加inset。这不是一个精确的outer-glow复制，但我相信它会满足您的需求。


input[type='text'] {
  -moz-box-shadow: 0px 0px 4px #ffffff;
  -webkit-box-shadow: 0px 0px 4px #ffffff;
  box-shadow: 0px 0px 4px #ffffff;
}

将光晕效果添加到输入框和按钮

3 个答案: