CSS outline:none
当元素获得焦点的时候,焦点框为0.
比如说当前这个网页,你用tab键切换的时候,文字链接、搜索框、按钮等的外面会有一个虚线框(或高亮框),此时当前的元素就获得了焦点,你可以对它进行操作。
这个功能一般是为使用键盘操作的用户准备的。
有些链接——比如一个图片链接,你不想让他出现虚线框破坏设计感,就可以用此方法。
建议一般不要去掉,只在一些影响设计美感的地方用。毕竟这个焦点框对键盘用户是很有帮助的。
定义和用法
outline-style 属性用于设置元素的整个轮廓的样式。样式不能是 none,否则轮廓不会出现。
outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。outline 属性设置元素周围的轮廓线。
注释:请始终在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。
注释:轮廓线不会占据空间,也不一定是矩形。
默认值: none
设置轮廓的样式:
p
{
outline-style:dotted;
}
浏览器支持
所有主流浏览器都支持 outline-style 属性。
只有在规定了 !DOCTYPE 时,Internet Explorer 才支持 outline-style 属性。
可能的值
值 描述
none 默认。定义无轮廓。
dotted 定义点状的轮廓。
dashed 定义虚线轮廓。
solid 定义实线轮廓。
double 定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。
inherit 规定应该从父元素继承轮廓样式的设置。
a:link、a:visited、a:hover、a:active .
它的位置必须是这样写,否则鼠标选中或移开出现虚线去不掉的情况
eg: a:visited,a:hover,a:active{
outline: 0;
}
1.鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性,后面的属性会覆盖前面的属性定义;
2.鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性,后面的属性会覆盖前面的属性定义;
所以说,a:hover定义一定要放在a:link、a:visited的后面,,,
分享到:
相关推荐
├01 css3元素选择器 属性选择器 伪类选择器.mp4 ├02 css3文本选择器 表单选择器 子选择器.mp4 ...├27 阿里矢量图标库的使用方法.mp4 ├28 淘宝网移动端首页开发实战1.mp4 └29 淘宝网移动端首页开发实战2.mp4
独立于任何网页位置处,声明一个样式文件(.css为后缀),在文件中声明样式,在使用的网页中引入.css文件。 使用步骤: 1.创建样式表文件(.css) 2.在样式文件中编写样式规则 3.在网页中对样式文件进行引入 <...
Storybook插件大纲可用于在的预览中直观地调试CSS布局和对齐方式。 基于 ,它在预览窗格中的每个元素周围绘制轮廓。 入门 需要Storybook 6.1或更高版本。 使用npx sb upgrade --prerelease安装最新npx sb upgrade --...
此扩展适用于CSS outline属性:在网页的任何CSS中添加以下代码段`* {outline:1px实心红色; }`扩展只做同样的事情; 它为不同的元素赋予不同的颜色,而代码段为每个元素添加了红色轮廓。 ----------#其他工作和...
outline的使用,大家都喜欢在reset样式表中直接重置: 复制代码代码如下: * { outline: none; } Eric Meyers 在他的CSS Reset 是这样重置的: 复制代码代码如下: /* remember to define focus styles! */ :focus { ...
为什么选择Teenyicons?... 使用CSS的color更改SVG的颜色。 < svg class = " w-4 h-4 text-white " viewBox = " 0 0 15 15 " fill = " none " xmlns = " http://www.w3.org/2000/svg " > < path d
在此处观看演示: : 用法可以在“ example \ source.txt”或示例文件夹的“ example \ guide_and_outline.json”中找到有关功能列表和用于创建标记的语法的简短指南,该指南还提供了有关语法和功能的更详细视图选项...
有的时候黄色边框很影响页面效果,并且textarea拖动改变大小之后直接影响布局,所以为了不使这些多余的功能和效果影响页面,可以使用一下几句CSS清除掉chrome浏览器的默认效果,代码如下: 取消表单项聚焦时产生的...
outline Visual Studio 默认的大纲方案只允许在方法级别及以上进行代码的折叠,无法对一个if、while的区块进行折叠,而这款工具则正好弥补了这个问题。 highlight all occurrences of selected word 该扩展能以...
可React式React组件中CSS模块的一致,轻松覆盖安装npm install react-styleable --save-dev用法道具中的样式react-styleable使来自CSS模块的样式可在props.css上props.css 。 编写具有所有好处的样式表。 例如: . ...
它将自动将.keyboard-focus或.mouse-focus类名添加到body标签,具体取决于用户当前使用的导航方法(将随用户切换而切换)。 在您CSS中包括.mouse-focus :focus { outline: none; } .mouse-focus :focus { outline:...
全 局控制 CSS实现 a{blr:[removed]this.onFocus=this.close());} /* 只支持IE,过多使用效率低 */ a{blr:[removed]this.onFocus=this.blur());} /* 只支持IE,过多使用效率低 */ a:focus { -moz