0
点赞
收藏
分享

微信扫一扫

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



文章目录

  • 一、更改轮廓线 outline
  • 二、轮廓线代码示例
  • 三、取消轮廓线代码示例







一、更改轮廓线 outline


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

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



outline 样式后可设置 1 ~ 3 个参数

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


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

outline: 0;

或者

outline: none;

取消轮廓线内嵌式写法 :

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






二、轮廓线代码示例


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

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


选中后的状态为

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

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



代码示例 :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>取消轮廓线示例</title>
</head>
<body>
	<input type="text">
</body>
</html>

显示效果 :

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

  • 选中状态 :

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






三、取消轮廓线代码示例


代码示例 :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>取消轮廓线示例</title>
	<style>
		input {
			outline: 0;
		}
	</style>
</head>
<body>
	<input type="text">
</body>
</html>

显示效果 :

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


举报

相关推荐

CSS系列之轮廓线outline

获取地区轮廓线

0 条评论