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的后面,,,
分享到:
相关推荐
响应式Web开发是一种现代网页设计方法,旨在创建能够适应不同设备屏幕尺寸和方向的网站。在本教程中,我们将深入探讨HTML5、CSS3以及Bootstrap框架在构建响应式页面中的应用。具体而言,我们将重点关注CSS3中的`...
标题中的“使用CSS实现outline切换的动画效果”指的是在网页设计中,利用CSS(层叠样式表)技术来创建一种动态的聚焦轮廓效果。当用户通过键盘的Tab键在页面上的表单元素之间切换焦点时,通常会有默认的outline显示...
CSS模块化方法如CSS Modules和CSS-in-JS将样式封装在组件内,减少样式冲突。CSS构建工具如Webpack、Gulp、PostCSS则用于自动化处理CSS,实现模块化、自动化编译和优化。 ### 总结 “css-handbook”很可能详细涵盖...
【CSS3 Outline】 在网页设计中,CSS3的outline属性是一个非常实用的工具,它允许我们在元素周围创建非矩形边框,而不会影响元素的尺寸或布局。本教程将深入探讨如何利用CSS3实现圆角的outline效果,特别适用于创建...
- **示例分析**:通过具体例子展示派生选择器的使用方法。 - **1.6 CSS id选择器** - **定义与用法**:阐述id选择器的特性,以及如何在文档中唯一标识某个元素。 - **案例分享**:提供实际项目中使用id选择器的...
### CSS3常用方法详解 #### 一、选择器与路径优化 - **Class选择器**:在多数情况下,推荐使用`class`选择器而非`id`选择器,以提高代码的复用性。同时,避免选择器路径过长,通常不超过3个层次,这样可以减少选择...
本文将深入探讨CSS的各种属性及其用法,帮助初学者和经验丰富的开发者更好地理解和应用这些属性。 ### CSS 背景属性(Background) 背景属性包括`background-color`、`background-image`、`background-repeat`、`...
在 CSS3 中,开发者可以使用一系列增强的功能来定制网页元素的背景效果。这些功能不仅提供了更强大的控制能力,还增强了网页的设计美感。 ##### background - **描述**:在一个声明中设置所有的背景属性,包括颜色...
它详细阐述了CSS2.0的所有特性和用法,是初学者和有经验的前端开发者的重要参考资料。将手册放在自己的web网站上,可以让用户随时查看,提升用户体验,同时也可以作为在线教程,帮助更多人理解和掌握CSS2.0的精髓。 ...
- `readme.html`: 可能包含关于项目的基本信息、使用指南或者作者的注释,对于理解代码的用途和使用方法很有帮助。 - `jQuery之家.url`: 这可能是一个链接,指向一个与jQuery相关的资源,虽然不是直接与CSS3按钮有关...
在实际应用中,还可以考虑使用 Normalize.css 或者 Reset.css(如Normalize.css是另一种更为现代的重置方法,它不仅重置样式,还保持一些基本的语义化元素的默认样式)。无论选择哪种方法,关键在于确保网页在各种...
### CSS全科教程知识点概述 #### 一、CSS基础 **1.1 CSS简介** ...以上是CSS全科教程中所涉及的主要知识点,通过学习这些内容,可以全面掌握CSS的基础和高级用法,从而更好地应用于实际项目中。
在本教程中,我们将探讨五种常见的CSS图片效果及其实现方法,帮助你提升网页视觉吸引力。 1. 阴影效果: CSS的`box-shadow`属性可以为图片添加阴影效果,增加立体感。例如: ```css img { box-shadow: 2px 2px 4px...
├01 css3元素选择器 属性选择器 伪类选择器.mp4 ├02 css3文本选择器 表单选择器 子选择器.mp4 ...├27 阿里矢量图标库的使用方法.mp4 ├28 淘宝网移动端首页开发实战1.mp4 └29 淘宝网移动端首页开发实战2.mp4
总结来说,这个压缩包提供的是一种实践性的学习资源,帮助开发者或设计者掌握使用CSS和HTML创建各种边框形状的方法。通过这种方式,他们能够提升网页的视觉设计能力,使网页内容更加丰富多样,同时保持良好的可读性...
独立于任何网页位置处,声明一个样式文件(.css为后缀),在文件中声明样式,在使用的网页中引入.css文件。 使用步骤: 1.创建样式表文件(.css) 2.在样式文件中编写样式规则 3.在网页中对样式文件进行引入 <...
在不使用JavaScript或任何服务器端技术的情况下,仅依靠CSS(层叠样式表)实现的静态TAB控件是一种高效且灵活的方法。本文将深入探讨如何使用CSS来创建这样的控件,并分享一些优化和扩展策略。 1. **基础结构** ...
- **background-color**: 定义元素的背景颜色,可以使用颜色名称、十六进制值、RGB/RGBA等表示方法。 - **background-image**: 设置元素的背景图像。可以通过URL来指定图像路径。 - **background-position**: 设定...
### 精通div+css网页样式与网页布局 #### 一、基础知识介绍 ...通过以上介绍可以看出,**div+css**结合使用能够非常灵活地控制网页布局和样式。熟练掌握这些基本概念和技术点对于开发高质量、易维护的网页至关重要。