【CSS】更改用户界面样式 ② ( 取消轮廓线 outline | 取消轮廓线设置方式 outline: 0； | 代码示例 )
一、更改轮廓线 outline
轮廓线 是 元素 边框 外面 的一条线 , 其作用是 选中后突出元素 ;
一般情况下都会去掉 轮廓线 显示 ;
outline 样式后可设置 1 ~ 3 个参数 , 按照顺序分别是 :
- outline-color 轮廓线颜色
- outline-style 轮廓线风格
- outline-width 轮廓线宽度
常用的取消轮廓线的设置是
outline: 0;
或者
outline: none;
取消轮廓线内嵌式写法 :
<input type="text" style="outline: 0;"/>
二、轮廓线代码示例
在网页中设置一个表单 , 默认状态为
选中后的状态为
选中后的外面的一圈黑线 , 就是轮廓线 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>取消轮廓线示例</title>
</head>
<body><input type="text">
</body>
</html>
显示效果 :
-
默认状态 :
-
选中状态 :
三、取消轮廓线代码示例
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>取消轮廓线示例</title><style>input {outline: 0;}</style>
</head>
<body><input type="text">
</body>
</html>
显示效果 :
