`
zhangyaochun
  • 浏览: 2614063 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

css之outline

cssoutline 
阅读更多

 

CSS outline 属性

 

       --------绘制于元素周围的一条线，位于边框边缘的外围，可以起到突出元素的作用。

 

 

  • 轮廓线不会占空间，也不一定是矩形
  • 除了IE，所有浏览器都支持
  • 只有规定了!DOCTYPE时，IE8及更高版本支持



可能的值

值 描述
outline-color 规定边框的颜色。参阅：outline-color 中可能的值。
outline-style 规定边框的样式。参阅：outline-style 中可能的值。
outline-width 规定边框的宽度。参阅：outline-width 中可能的值。
inherit 规定应该从父元素继承 outline 属性的设置。



扩展阅读：

分享到：
| 简单整理IE的hack
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例2-7 CSS3 outline-offset属性

    具体而言，我们将重点关注CSS3中的`outline-offset`属性，它在第2章“CSS3文本与图标”中的例2-7中被详细讲解。 首先，让我们理解HTML5的基础。HTML5是超文本标记语言的最新版本，增强了语义化元素，提供了更好的...

    使用CSS实现outline切换的动画效果

    标题中的“使用CSS实现outline切换的动画效果”指的是在网页设计中，利用CSS（层叠样式表）技术来创建一种动态的聚焦轮廓效果。当用户通过键盘的Tab键在页面上的表单元素之间切换焦点时，通常会有默认的outline显示...

    CSS轮廓outline的具体使用

    在CSS中，轮廓（outline）是一种非几何的装饰性元素，用于强调或区分网页上的某个特定元素。与边框（border）不同，轮廓并不占据任何空间，它位于边框之外，不影响元素的尺寸。轮廓主要通过`outline`属性来设置，...

    利用CSS3实现圆角的outline效果的教程

    一、首先，outline是个很...2. IE8+支持outline严格来讲属于CSS3属性，但是IE8+浏览器就支持了。外挂一句，IE9+浏览器的outline还支持invert，专门针对outline-color. 所以，如果你的项目不用管IE6/IE7浏览器，可以把ou

    CSS和CSS3思维导图（xmind版）

    什么是CSS？ CSS 是层叠样式表 ( Cascading Style ...outline(外边框) background-origin(指定背景图片从哪里开始显示) background-clip(指定背景图片从什么位置开始裁切)  background(为一个元素指定多个背景)

    CSS 轮廓（outline）

    CSS轮廓（Outline）是网页设计中用于强调和突出元素的一种视觉工具。它不同于边框（border），因为轮廓并不占据任何空间，而是出现在元素边框之外，可以用来吸引用户的注意力或者为无障碍访问提供辅助。了解并熟练...

    css-handbook_handbook_css_

    CSS在提升网站可访问性方面扮演重要角色，通过`color`, `font-size`, `outline`等属性确保不同能力的用户都能访问网站。响应式设计（Responsive Web Design, RWD）利用媒体查询（`media queries`）使网站适应不同...

    outline网站模板（简约而不简单）

    在Outline模板中，可能应用了Css3的渐变效果、阴影效果和响应式布局，以实现跨设备的兼容性和动态视觉效果，使网站在不同屏幕尺寸下都能保持良好的观感。 【响应式设计】在 Outline 模板中，很可能采用了媒体查询...

    CSS3 离线参考手册

    ### CSS3离线参考手册知识点概述 #### 一、CSS3简介与重要性 CSS3是层叠样式表（Cascading Style Sheets）的第三个主要版本，它为网页设计提供了更多的灵活性、创造性和控制能力。相比之前的版本，CSS3引入了许多新...

    css效果之边框内圆角

    本文主要介绍了css效果之边框内圆角，分享给大家，也给自己留个笔记，具体如下： 效果如下 你可能想到的方法 padding: 16px; box-shadow: 0 0 0 8px #655; border-radius: 5px; 如果采用上面的方式，会产生一个与...

    CSS_3样式.pdf

    ### CSS3 样式知识点详解 #### CSS3 背景属性 在 CSS3 中，开发者可以使用一系列增强的功能来定制网页元素的背景效果。这些功能不仅提供了更强大的控制能力，还增强了网页的设计美感。 ##### background - **描述...

    CSS Quick Syntax Reference

    The CSS Quick Syntax Reference is a 150-page syntax reference to the ...18. Outline 19. Margin and padding 20. Dimension 21. Positioning 22. Classification 23. List 24. Table 25. Media 26. Best practices

    CSS层叠样式表技术参考手册

    ### CSS层叠样式表技术参考手册知识点概览 #### 1. CSS基础教程 - **1.1 CSS教程** - **目标与价值**：通过本教程的学习，开发者能够掌握CSS的基本概念及其如何用于控制网页的样式和布局，进而提高工作效率。 - *...

    Dreamweaver里CSS编辑器对应的CSS属性

    5. **盒模型属性**：CSS盒模型是理解元素尺寸的关键，包括`box-sizing`（控制元素的边框和内填充如何影响总尺寸）、`border`（边框的宽度、样式和颜色）和`outline`（元素周围的轮廓）。 6. **过渡和动画属性**：`...

    css设计艺术字

    8. **边框与轮廓**：`border`属性可定义边框的宽度、样式和颜色，`outline`则用于创建非矩形的轮廓效果。 9. **CSS动画**：结合`@keyframes`规则，可以创建动态的艺术字效果，如闪烁、滑动或旋转。 10. **CSS变量*...

    用CSS写的发送按钮特效

    outline: none; box-shadow: 0 0 0 2px #90CAF9; } ``` 为了实现更复杂的动画效果，我们可以使用CSS的`transition`属性，它能让样式变化过程平滑过渡： ```css .send-button { transition: all 0.2s ease-in-...

    html css button样式

    outline: none; /* 移除默认的轮廓线 */ box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); } ``` 9. **自定义图标**：利用`::before`和`::after`伪元素，可以添加图标增强按钮的表现力。例如，使用Font Awesome图标库： ...

    CSS轮廓全解析：美化与可用性的双重奏

    CSS 轮廓（Outline）是 CSS 中一个重要的视觉反馈机制，主要用于增强用户界面元素的可视性。它不同于传统的边框(border)，轮廓不占据布局空间，也不会覆盖页面上的其他元素。轮廓的主要作用是围绕元素绘制线条，常被...

Magicbox
Global site tag (gtag.js) - Google Analytics