【CSS】更改用户界面样式 ② ( 取消轮廓线 outline | 取消轮廓线设置方式 outline: 0； | 代码示例 )
【CSS】更改用户界面样式 ② ( 取消轮廓线 outline | 取消轮廓线设置方式 outline: 0； | 代码示例 )
韩曙亮
发布于 2023-04-24 11:19:55
发布于 2023-04-24 11:19:55
一、更改轮廓线 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>显示效果 :
在这里插入图片描述
本文参与?腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2023-04-16，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录