外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似,但和元素边框border完全不同,外轮廓线不占用网页布局空间,不一定是矩形,外轮廓是属于一种动态样式,只有元素获取到焦点或者被激活时呈现。

outline属性早在CSS2中就出现了,主要是用来在元素周围绘制一条轮廓线,可以起到突出元素的作用。但是并未得到各主流浏览器的广泛支持,在CSS3中对outline作了一定的扩展,在以前的基础上增加新特性。outline属性的基本语法如下:

outline: [outline-color] || [outline-style] || [outline-width] || [outline-offset] || inherit

从语法中可以看出outline和border边框属性的使用方法极其类似。outline-color相当于border-color、outline-style相当于border-style,而outline-width相当于border-width,只不过CSS3给outline属性增加了一个outline-offset属性,其取值说明如下。

属性值

属性值说明

outline-color

定义轮廓线的颜色,属性值为CSS中定义的颜色值。在实际应用中,可以将此参数省略,省略时此参数的默认值为黑色。

outline-style

定义轮廓线的样式,属性为CSS中定义线的样式。在实际应用中,可以将此参数省略,省略时此参数的默认值为none,省略后不对该轮廓线进行任何绘制。

outline-width

定义轮廓线的宽度,属性值可以为一个宽度值。在实际应用中,可以将此参数省略,省略时此参数的默认值为medium,表示绘制中等宽度的轮廓线。

outline-offset

定义轮廓边框的偏移位置的数值,此值可以取负数值。当此参数的值为正数值,表示轮廓边框向外偏离多少个像素;当此参数的值为负数值,表示轮廓边框向内偏移多少个像素。

inherit

元素继承父元素的outline效果。

CSS3外轮廓属性的更多相关文章

  1. css3 常用的属性

    1.伪类选择符 Pseudo-Classes Selectors Selectors选择符 CSS Version版本 Description简介 E:link CSS1 设置超链接a在未被访问前的样 ...

  2. CSS3利用text-shadow属性实现多种效果的文字样式展现

    一.效过图展示: 已经是比较久之前学习的文字效果了.但是还是很实用很有趣的.利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果,因此可以替换掉之前使用过的一些繁琐的图片.到目前 ...

  3. css3的一些属性

    以前还没有注意过css的一些属性,近期发现有一些样式很好用,现在整理一遍. CSS3 动画属性 @keyframes : 规定动画 可以通过keyframes 改变一个块的样式当然这是要配合anima ...

  4. css2和CSS3的background属性简写

    1.css2:background:background-color || url("") || no-repeat || scroll || 0 0;  css3:  backg ...

  5. CSS控制边界、边框与外轮廓

    一.CSS控制边界 1.内边距 padding(内边距也叫内填充) padding-bottom 长度/百分比 元件下端边线的空隙 padding-left 长度/百分比 元件左端边线的空隙 padd ...

  6. css3新增的属性有哪些

    徐先森讲web CSS3新增的属性有哪些: CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: b ...

  7. CSS3新增的属性有哪些:

    CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: border-radius:CSS3圆角边框. ...

  8. CSS背景和CSS3背景background属性

    css背景属性用于定义HTML元素的背景 背景属性既可以为单个的单元设置背景,也可以为整个页面设置背景,可以对上述二者的任意组合设置背景,段落.文字.不同状态的链接.图像.内容区域修改其背景样式.设置 ...

  9. 学习笔记:CSS3的filter属性

    CSS3的filter属性 (版权归原作者所有) http://www.jianshu.com/p/ca7a2bdcc1e7/comments/4956985 filter: blur(5px); f ...

随机推荐

  1. MySQL(Percona Server) 5.6 主从复制

    MySQL(Percona Server) 5.6.15 主库:192.168.2.21 从库:192.168.2.22 例如我们同步的数据库为:test. 如果需要同步多个数据库下面会有说明. My ...

  2. Java编程中-servlet

    今天将别人的项目导入eclipse之后,出现了“The import javax.servlet cannot be resolved”错误 import javax.servlet.ServletE ...

  3. AADC安装指南

    可选功能中,”密码哈希同步“可以将本地域账号的密码默认每三小时同步到O365:”密码回写“则是反过来,但是世纪互联的答复是”此功能需要Auzre AD Service功能,目前国内版还不支持使用,国际 ...

  4. x86架构手机跑安卓好吗?(脑补)

    华硕低价位手机ZenFone一推出就掀起市场话题,许多人也对ZenFone所采用的Intel Atom处理器有所意见,深怕其相容性问题无法正确执行应用程式App,这究竟是怎么回事呢? Intel近几年 ...

  5. thinkphp留言板例子(多条件查询)

    登录: login.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  6. Windows Locale Codes - Sortable list(具体一个语言里还可具体细分,中国是2052,法国是1036)

    Windows Locale Codes - Sortable list NOTE: Code page is an outdated method for character encoding, y ...

  7. C# 日期格式转【转】

    使用:DateTime.ToString的方法(String, IFormatProvider)转换格式 using System; using System.Globalization; Strin ...

  8. vuejsLearn---通过手脚架快速搭建一个vuejs项目

    开始快速搭建一个项目 通过Webpack + vue-loader 手脚架 https://github.com/vuejs-templates/webpack 按照它的步骤一步一步来 $ npm i ...

  9. 【爬虫】BeautifulSoup之爬取百度贴吧的帖子

    在网上看到爬百度贴吧的例子,仿照写了一个用BeautifulSoup实现的,直接上代码吧 #coding:gbk import urllib2 from bs4 import BeautifulSou ...

  10. wamp下多域名配置问题

    1.找到wamp安装目录的apache安装目录 找到 httpd.conf文件 例如我安装的目录为 E:\wamp\bin\apache\apache2.2.8\conf\httpd.conf 也可以 ...