【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; | 代码示例 )_第1张图片
选中后的状态为
【CSS】更改用户界面样式 ② ( 取消轮廓线 outline | 取消轮廓线设置方式 outline: 0; | 代码示例 )_第2张图片

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


代码示例 :

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

显示效果 :

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

  • 选中状态 :

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





三、取消轮廓线代码示例



代码示例 :

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; | 代码示例 )_第5张图片

你可能感兴趣的:(CSS,css,前端,html,轮廓线,取消轮廓线)