Css制作文本框发光效果
CSS控制文本框发光效果，是各种前端开发库使用最多的效果之一，这里面使用了CSS直接控制其样式，显示效果为：当文本框获取焦点时，文本框四周均匀缓慢发光的国度效果，提升了界面的美观，也提升了用户体验。
接下来自己尝试着做一个：
首先需要准备的CSS3的几个属性：
一、RGBA 属性：
最近网上对CSS3的讨论真的很火，现在讲一下CSS3里目前用的比较广的RGBA属性的高级使用方法。这个属性的兼容问题比较简单，IE8已经支持这个属性，IE6和IE7也可以通过hack支持。RGBA和CSS2里的RBG属性差不多，只是RGBA属性多了一个透明度的定义，CSS3标准里对RGBA属性的解释如下：
/* 基本语法 */
em { color: Rgba(red,green,blue,opacity) }
/* 举例 */
em { color: rgba(255,0,0,1) }
/* 红色，不透明 */
em { color: rgba(100%,0%,0%,1) }
/* 同上 */
在现实中，使用三个1~255的十进制数值去定义一个颜色比用百分比更加准确，下面是几个颜色的RGB数值，大家在使用的时候只需要把00~FF的16进制数值换算成十进制就行了。
二、shadow属性
Shadow属性可以在指定的方向建立物体的投影。它的表达式是这样的： Filter：Shadow（Color=color，Direction=direction）
在这里，Shadow有两个参数值：Color参数用来指定投影的颜色；Direction参数用来指定投影的方向。 这里说的方向与我们在第二节Blur属性中提到的“方向与角度的关系”是一样的。 也许您会问，前面讲到的Dropshadow属性和Shadow属性有什么不同吗？ 光说的话，您恐怕还难以理解，让我们看一看分别利用这两个属性做出来的效果有什么不同（见下图）：
这样一对比，就可以很明显的看出两者的不同。 Shadow属性可以在任意角度进行投射阴影，Dropshadow属性实际上是用偏移来定义阴影的。所以，看上去左图的文字和阴影就像是一体的，而右图的文字就像脱离了阴影一样。 本例的代码如下：
<html>
<head>
<title> shadow</title>
<style>//*开始设置CSS样式*//
<!--
.shadow{position:absolute；top:20；width:300；
filter:shadow(color=#cc66ff,direction=225)；}
//*定义Shadow类的样式，绝对定位，Shadow属性，阴影颜色、投影方向*//
.dropshadow{position:absolute；top:180；width:300；
filter:dropshadow(color=#cc66ff,offx=10,offy=10,positive=1)；}
//*设置Dropshadow类的样式，样式与Shadow类相似， 不同的是滤镜用了
Dropshadow属性，设置X轴和Y轴的偏移量*//
-->
</style>
</head>
<body>
<div class=“shadow”>//*区域内为Shadow类*//
<p style=“font-family：bailey；font-size：48pt；
font-weight：bold；color：#FF9900；”>
Hongen Online</p>//*定义字体名称、大小、粗细、前景色*//
</div>
<div class=“dropshadow”>//*区域内为Dropshadow类*//
<p style=“font-family：bailey；font-size：48pt；
font-weight：bold；color：#FF9900；”>
Hongen Online</p>//*定义字体样式与Shadow类的一样*//
</div>
</body>
</html>
三、圆角矩形
所谓的CSS高级技巧...其实是一些对基本技巧的创意组合, 任何手段和技巧都是解决问题的方法. 只要学会这种思考问题的方法, 你也能拥有属于自己的CSS秘籍.
CSS2 还没有办法创造出曲线边框, 明显的, 仅仅方框是没办法满足我们设计师的. 所以CSS圆角技术到现在还是那么的火.
（1），滑动门技术(Sliding Doors)
Top-Left.gif 与 Bottom-Left.gif 都是大图像, Top-Right.gif 和 Bottom-Right.gif 都是小图像, 小图像在大图像上根据尺寸进行自动滑动以适应内容.
该方法用到2组4个图片: 1组Top图片构成顶部圆角, 1组Bottom图片构成底部圆角以及主体. 注意容器的最大高度和宽度不能超过图片的最大高度和宽度.
html代码大致如下:<div> <div> <div> <h1>标题</h1> <p>内容</p> </div> </div> </div>CSS代码大致如下:.wrapper{width:20em;background:#ccc url(../images/bottom-left.gif) no-repeat left bottom;}
.box-outer{background:url(../images/bottom-right.gif) no-repeat right bottom;}
.box-inner{background:url(../images/top-left.gif) no-repeat left top;}
.wrapper h1{padding:2%;background:url(../images/top-right.gif) no-repeat right top;}
.wrapper p{padding:2%;}Tips:该方法很好的解决了容器扩展的问题, 但是要注意容器的最大尺寸不要超过背景图片所能构成的最大尺寸;
该方法需要2组额外的没有任何语义的标签, 在结构上并不理想, 我们可以用JavaScript和DOM动态添加额外元素来避免这个问题, JavaScript不作讨论.
滑动门适用范围很广, 以至于随处可见.
（2）， 山顶角(MountainTop)Web大师Dan Cederholm的发明, 和他在Web Standard Solutions中的变色龙小图标有异曲同工之妙.
如果用 3.滑动门 的技术创建多种颜色的圆角矩形, 那是不是要建立多组不同颜色的图片呢? 那是不是会很麻烦呀? 幸运的是Dan为我们带来了山顶角. 他建立的不是多种颜色的图片组, 而是一组圆角的蒙板. 用蒙板盖住背景色, 生成圆角矩形, 这种逆向思维令人敬佩.
基本的HTML代码和CSS代码与上例相同, 也需要4个不同的圆角蒙板. 代码不做重复.Tips:
可以使用.png来创建圆滑的透明蒙板, 但介于IE6和以下版本不支持png-24的透明效果, 需要用到Hacks, 所以不太推荐. 所以对于gif图片的蒙板, 对于小弧度的圆角矩形效果较好, 大弧度的圆角矩形可能会出现锯齿. 同样的需要添加额外的非语义标签, 语义化狂热者们可以用JavaScript来完成这个工作.
（3）， CSS Sprites 圆角CSS Sprites并不是专门制作圆角矩形的, 但是它提供了一种制作圆角矩形的方案.只单单用background的position来指定圆角图片背景定位, 但是会多出很多额外标签, 这里不做推荐.div#rad{ border-radius:2px; background:yellow; }也能够显示一个圆角框，而圆角的程度取决于border-radius后面的值。四、CSS Sprites背景绝对定位
CSS Sprites, 利用CSS background-position 进行背景绝对定位, 减少HTTP请求, 加速网页显示, 解决图片载入闪动问题的技巧.CSS Sprites最适合用来做的, 恩, 比如:
- 清单导航的CSS鼠标翻转效果
- 大量小图标集中的应用 (FckEditor)
- ...很多很多,多的想不出来了.
实现原理简单地说就是控制容器的大小, 然后利用background-repeat, background-position来对背景图片进行定位. 更可以理解为将网站大量背景图整合到一张大图中的这种行为( 表象上 )
用一个鼠标翻转事件来说明吧:
准备:
HTML代码:<ul> <li><a id="item1" href="#" title="Item 1"> </a></li> <li><a id="item2" href="#" title="Item 2"> </a></li> <li><a id="item3" href="#" title="Item 3"> </a></li> <li><a id="item4" href="#" title="Item 4"> </a></li> <li><a id="item5" href="#" title="Item 5"> </a></li> <li><a id="item6" href="#" title="Item 6"> </a></li> <li><a id="item7" href="#" title="Item 7"> </a></li>
<li><a id="item8" href="#" title="Item 8"> </a></li> <li><a id="item9" href="#" title="Item 9"> </a></li> </ul>
CSS代码:
ul { width:300px; height:300px; margin:0px auto; padding:0px; overflow:hidden; background:transparent url(02.jpg)}
li {list-style-type:none; width:100px; height:100px; float:left}
li a { display:block; width:100px; height:100px; text-decoration:none;
background:transparent url(01.jpg) no-repeat 500px 500px; }
a#item1:hover {background-position: 0 0; }
a#item2:hover {background-position: -100px 0;}
a#item3:hover {background-position: -200px 0;}
a#item4:hover {background-position: 0 -100px;}
a#item5:hover {background-position: -100px -100px;}
a#item6:hover {background-position: -200px -100px;}
a#item7:hover {background-position: 0 -200px;}
a#item8:hover {background-position: -100px -200px;}
a#item9:hover {background-position: -200px -200px;}
效果图如下:
有人要问了, 这有什么用么? 这可以模拟图片热区说明, 地图提示 等等...
Tips:
CSS Sprites需要精确的背景图片定位, 比较让人头疼. 网页教学网
相对于减少了多次HTTP请求的优点, 却增加了一次性一个大的HTTP请求的缺点... 自己权衡吧
五、CSS高级属性选择器
CSS的选择器可谓种类繁多，属性选择器就是其中一种，虽然老浏览器(如IE6)不支持，但当前主流的标准浏览器都很好的支持。所以有必要学习一下。
所谓属性选择器就是能选择具有指定属性元素的CSS选择器。比如：
input[type="text"] { border:1px;}
这条CSS规则就声明了 类型为文本框的输入标签 的边框为1像素。这是一般而言的属性选择器，当元素比较复杂时就得用到可以 匹配属性 的高级选择器了。比如：
div[class^="menu"] { color:red;}
div[class$="menu"] { color:red;}
div[class*="menu"] { color:red;}
大家可以看到不同的一点就是class后面跟的三人符号：”^”,”$”,”*”。分别表示：
1.匹配具有class属性，且值以menu开头的div元素。例如：class为menu1,menua,menu0都可以渲染指定CSS规则。
2.匹配具有class属性，且值以menu结尾的div元素。例如：class为1menu,amenu,0menu都可以渲染指定CSS规则。
3.匹配具有class属性，且值含有menu的div元素。例如：class为1menu,menu1,0menua都可以渲染指定CSS规则。
六、伪类和高级的伪类
通过XX:伪类名的方式给元素添加伪类，比如在a标签的鼠标移上、鼠标点击、已访问的不同样式可以通过这个方式来实现。
a:link{ /*平常状态*/
text-decoration:none;
}
a:hover{ /*移上*/
text-decoration:underline;
color:green;
}
a:focus,a:active{ /*点击*/
text-decoration:underline;
color:red;
}
a:visited{ /*已访问*/
color:purple;
text-decoration:none;
}
除此之外还有:first-child表示第一个子元素的样式（比如<ul><li></li><li></li></ul>）等，你可以在W3C查阅更多消息。
以及::选择器，用它可以实现更奇妙的效果。比如本博客使用了
*::selection{
background:rgb(233,184,233);
text-shadow:1px 1px 1px #ffb69a;
}
于是你便可以看到这种神奇效果，当你选中本文文字时样式的更改。
七、更多Webkit属性
一般Webkit属性以-webkit-开头，比如-webkit-border-radius-，相应的同时也有-moz-的属性，比如-moz-border-radius属性。这表示他们处于基本测试版，而且仅能有这些内核的浏览器识别。你可以 打开这里参考更多Webkit属性 以美化显示效果。
2,制作发光边框文本框效果
首先，拿一个input元素举例：
<input type="text" class="sdw" />
现在我们要让这个input组件在被成为焦点（点击）时向四周发光，并且为粉色，我只需添加一段CSS代码：
.sdw:focus{
transition:border linear .2s,box-shadow linear .5s; -moz-transition:border linear .2s,-moz-box-shadow linear .5s; -webkit-transition:border linear .2s,-webkit-box-shadow linear .5s; outline:none;border-color:rgba(241,39,242,.75); box-shadow:0 0 8px rgba(241,39,232,.5); -moz-box-shadow:0 0 8px rgba(241,39,232,.5); -webkit-box-shadow:0 0 8px rgba(241,39,232,3);}就可以了。其中靛蓝色部分的文字是利用了Transition属性产生一个过渡效果，而其中的RGB色彩可以根据个人口味进行改变。预览效果如下：
为全局所有input组件添加边框发光效果
如果希望一个网页中所有的文字输入框出现这种效果，只需CSS全局设定即可。
在你的CSS文件中添加这么一句：
input[type=text]:focus,input[type=password]:focus,textarea:focus{
transition:border linear .2s,box-shadow linear .5s; -moz-transition:border linear .2s,-moz-box-shadow linear .5s; -webkit-transition:border linear .2s,-webkit-box-shadow linear .5s; outline:none;border-color:rgba(241,39,242,.75); box-shadow:0 0 8px rgba(241,39,232,.5); -moz-box-shadow:0 0 8px rgba(241,39,232,.5); -webkit-box-shadow:0 0 8px rgba(241,39,232,3);}
356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
