本文介绍了如何使用CSS中的box-radius、box-shadow及transition属性为输入框创建吸引人的边缘高亮效果，提升用户体验。
运用到：
- box-radius
- box-shadow
- transition
<html>
<head>
<style type="text/css">
#main
{
height: 500px;
width: 500px;
text-align: center;
margin: 0 auto;
background-color: #ffffff;
}
input
{
border-color: rgba(189, 62, 242, 75);
box-shadow: 0 0 8px rgba(189, 62, 94, .5);
outline: none;
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;
-moz-box-shadow: 0 8px rgba(189, 62, 94, .5);
-webkit-box-shadow:0 8px rgba(189, 62, 94, .5);
border-radius: 5px;
}
ul
{
margin: 0 auto;
}
li
{
margin-top: 100px;
}
</style>
</head>
<body>
<div id='main'>
<ul>
<li>
<input type='text'
最低0.47元/天 解锁文章
609
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
