CSS实现输⼊框的⾼亮效果-------Day50
⼜到周末了，这⼀天天过的真快，明天应该回⽼家了。不知道会不会有机会进⾏编写。尽量争取吧，实在不想就这样间断。假设说从前会⼀天天⽆聊到爆，那如今⾃⼰应该是⼀天天忙的要死，⽋缺了太多东西，那些浪费的时间可不是懊恼就能解决的。出来混。终归是要还的啊。
先来幅图画，显⽰下什么是所谓的⾼亮效果
在输⼊框周围出现了亮光，或者说阴影造成边框发亮的假象。这就是我所说的⾼亮效果，那到底该怎样是实现呢？
这样我们先来上⼀下代码，我是⽤的枫树浏览器，是webkit内核。所以这⾥仅仅写了webkit
.aa:HOVER{
-webkit-transition:border linear .2s,-webkit-box-shadow linear .5s;
border-color:rgba(141,39,142,.75);
-webkit-box-shadow:0 0 18px rgba(111,1,32,3);
box shadow怎么设置}
.aa{
height: 100px;width: 100px;
}
就这么了了⼏句话就实现了功能，图我就不上了，⼤致跟上⾯⼀个效果，则来分析⼀下成功的⼏个关键点：
1、transition的过渡。border linear .2s这是说border属性的逐步过渡。⽽后⾯则是对阴影部分的逐步过渡。
2、rgba（a，b，c，d），这个前⾯我们以前⽤到过⾮常多次，前三位凑成颜⾊。⽽第四位则是透明度，还需牢记才是。
3、box-shadow：x y 10px rgba（a，b，c，d）。相同在前⾯⽤到过⾮常多次。x y各⾃是阴影的⽅向，然后是阴影蔓延距离。最后则是阴影部分的颜⾊。
4、最后则是：hover，伪元素和伪类能够单独写⼀篇了吧，可是这个：hover起码我们都是相当熟悉的了吧
当然。不要忘记html部分的编写哦
<input type="text" class="aa">
这个能够直接复制去试试效果哦，只是我敲出来的仅仅是webkit浏览器的额
好了。要歇息了，明天还得早起，⼜要跑两天啊，时间好多都浪费在路上了......

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。