1、新建HTML文件。
2、创建HTML标签和内容。
3、预览效果如图。
4、设置右边框的颜色border-right-color:#30C。
5、预览效果如图。
6、设置右边框的颜色border-right-color:rgb(204,0,102)。
7、预览效果如图。
鼠标经过改变边框颜色可以直接css的:hover伪类，然后定义border样式就是了。如下示例代码：
a{color:#000border:1px solid #000} /* 默认的样式 */a:hover{border-color:#ccc} /* 鼠标经过时的样式 */
鼠标经过时将边框颜色变为了灰色。
1.CSS用:focus伪类就能实现内部边框的颜色，边框颜色改为了红色。具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度经验</title>
<style type="text/css">
* {margin: 0padding: 0}
.main {margin: 50px autowidth: 400px}
.inp {
width: 200px
height: 30px
}
.inp:focus {
outline:none
border: 1px solid red
}
</style>
</head>
<body>
<div class="main">
<input type="text" class="inp">
</div>
</body>
</html>
如何改变input点击后的边框颜色
