欢迎大家来到IT世界,在知识的湖畔探索吧!
效果图截图：
案例代码示下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>发光输入框</title>
<style type="text/css">
input{width: 280px;height: 30px;}
textarea{width: 280px;height: 80px;}
input,textarea{
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0 3px 3px;
margin: 5px 1px 3px 0;
border: #ddd 1px solid;
}
input:focus,textarea:focus{
box-shadow: 0 0 5px rgba(216,76,41,1);
padding: 3px 0 3px 3px;
margin: 5px 1px 3px 0;
border: rgba(216,76,41,1) 1px solid;
}
</style>
</head>
<body>
<input type="text" name="" id="" value="" />
<textarea></textarea>
</body>
</html>
欢迎大家来到IT世界,在知识的湖畔探索吧!
注意：
- 这里使用了css的 transition 动画属性。
- transition的浏览器兼容性，添加浏览器厂商前缀。
以上就是关于 “ css实现发光的input输入框 ” 的全部内容。
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://itzsg.com/18451.html
