CSS实现输入框的周围高亮效果让边框发亮
网站建设 2021-07-03 08:15www.dzhlxh.cn网站建设
又到周末了，这一天天过的真快，明天应该回老家了，不知道会不会有机会进行编写，尽量争取吧，实在不想就这样间断。如果说从前会一天天无聊到爆，那现在自己应该是一天天忙的要死，欠缺了太多东西，那些浪费的时间可不是懊恼就能解决的，出来混，终归是要还的啊。
先来幅图画，显示下什么是所谓的高亮效果
在输入框周围出现了亮光，或者说阴影造成边框发亮的假象，这就是我所说的高亮效果，那究竟该如何是实现呢？
这样我们先来上一下代码，我是用的枫树浏览器，是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);
}
.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浏览器的额
先来幅图画，显示下什么是所谓的高亮效果
在输入框周围出现了亮光，或者说阴影造成边框发亮的假象，这就是我所说的高亮效果，那究竟该如何是实现呢？
这样我们先来上一下代码，我是用的枫树浏览器，是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);
}
.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浏览器的额