【CSS】更改用户界面样式 ② ( 取消轮廓线 outline | 取消轮廓线设置方式 outline: 0; | 代码示例 )





一、更改轮廓线 outline



轮廓线元素 边框 外面 的一条线 , 其作用是 选中后突出元素 ;

一般情况下都会去掉 轮廓线 显示 ;


outline 样式后可设置 1 ~ 3 个参数 , 按照顺序分别是 :

  • outline-color 轮廓线颜色
  • outline-style 轮廓线风格
  • outline-width 轮廓线宽度

常用的取消轮廓线的设置是

outline: 0;

或者

outline: none;

取消轮廓线内嵌式写法 :

<input type="text" style="outline: 0;"/>




二、轮廓线代码示例



在网页中设置一个表单 , 默认状态为

在这里插入图片描述
选中后的状态为
在这里插入图片描述

选中后的外面的一圈黑线 , 就是轮廓线 ;

扫描二维码关注公众号,回复: 14863367 查看本文章

代码示例 :

<!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>

显示效果 :
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/han1202012/article/details/130173696