outline(轮廓)用于设置元素周围的一条线,用于元素边框的外围,可起到突出元素的作用。

outline属性所有浏览器都支持,如果规定了 !DOCTYPE,则 IE8 支持 outline 属性。

outline属性不会占用空间,也不一定是矩形。

outline的值的顺序:outline:outline-color,outline-style,outline-width;请始终在outline-color之前设置outline-style,元素只有先获得轮廓才能设置他的颜色。当设置为none时,则不显示轮廓线。

1、outline-color:invert(默认,执行颜色反转(逆向的颜色)。可使轮廓在不同的背景颜色中都是可见。)|颜色名称(red)|十六进制(#fff)|rgb(rgb(255,0,0))|inherit;

2、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 规定应该从父元素继承轮廓样式的设置。

效果如下:

3.outline-width:

值描述thin规定细轮廓。medium默认。规定中等的轮廓。thick规定粗的轮廓。length允许您规定轮廓粗细的值(如5px)。inherit规定应该从父元素继承轮廓宽度的设置。

outline属性的更多相关文章

  1. CSS3 border-radius 属性和CSS outline 属性

    CSS3 border-radius 属性 border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性. 提示:该属性允许为元素添加圆角边框! 注释:按此顺序设 ...

  2. css outline属性

    outline属性在一个html element的周围画出一条线来,位于边框的外围,起到突出元素的作用.轮廓线不占据任何布局空间,也不一定非要是矩形. p { outline:#00FF00 dott ...

  3. a:focus{outline: none;} 如何去掉点击链接时周围的虚线框outline属性

    1. CSS方式 在IE下是使用html属性:hideFoucs,在HTML标签中加上hidefocus=”true”属性即可,但这个属性是IE私有的,Firefox是不认的. 加了hidefocus ...

  4. 边框(Border) 和 轮廓(Outline) 属性

    border 复合属性.设置对象边框的特性. 标签定义及使用说明 如果上述值缺少一个没有关系,例如border:#FF0000;是允许的. 默认值: not specified 继承: no Java ...

  5. CSS的outline属性

    input标签的outline的三个属性: outline-color outline-style outline-width 当设置input的focus状态的时候可以使用. input:focus ...

  6. input text的outline属性

    普通的text选中编辑时会出现蓝色的边框,感觉不太美观,怎么去掉呢? 可以在text对应的样式里加入:outline: 0;

  7. CSS3——盒子模型 border(边框) 轮廓(outline)属性 margin外边距 padding填充

    盒子模型 包括——边距,边框,填充,和实际内容 Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清 ...

  8. outline和outline-offset属性实现简单的缝边效果

    如果现在有个需求,让你实现下面的样式,你会怎么做呢? 我首先想到的是用 border + box-shadow 实现,代码如下 div { margin: 50px auto; width: 200p ...

  9. 浏览器兼容性问题——IE不支持却很实用的CSS属性Outline和Child

    1. Outline(适用范围:鼠标悬浮hover加外边框) 我们在布局的时候,常常会因为添加边框border影响宽高的布局. 那么,outline是完美的替代品,因为它可以在不影响文档流的情况下呈现 ...

随机推荐

  1. Linux下部署LVS(DR)+keepalived+Nginx负载均衡

    架构部署 LVS/keepalived(master):192.168.21.3  LVS/keepalived(Slave):192.168.21.6  Nginx1:192.168.21.4  N ...

  2. Swift --- 面向对象中类和对象的属性

    Swift中类和对象的属性分为三种:储存属性,计算属性和类属性. import Foundation class Person { // 储存属性必须赋初值 var score1: Int = 20 ...

  3. Spring DI模式 小样例

           今儿跟同事讨论起来spring早期的,通过大篇幅xml的配置演变到今天annotation的过程,然后随手写了个小样例,感觉还不错,贴到这里留个纪念. 样例就是用JAVA API的方式, ...

  4. Lucene.Net+盘古分词

    前言 各位朋友,谢谢大家的支持,由于文件过大,有考虑到版权的问题,故没有提供下载,本人已建立一个搜索技术交流群:77570783,源代码已上传至群共享,需要的朋友,请自行下载! 首先自问自答几个问题, ...

  5. Tomcat7.0.40 基于DataSourceRealm的和JDBCRealm的资源用户访问控制

    软件版本: Tomcat 7.0.40 Mysql: 5.1 Host: CentOS 6.3 64bit 使用JDBCRealm (Tomcat 会使用所给的JDBC Connecter 自己去连M ...

  6. 关于text-align无法居中的问题

    昨天项目,一直出现一个无法居中的问题,最后发现竟然是text-align的问题,才发现自己对text-align的理解还是不够透彻,于是在此再举例分析下. css中的元素一共有三类:块元素.行内块和内 ...

  7. springmvc配置文件 spring-servlet

    <?xml version="1.0" encoding="UTF-8"?><!-- Bean头部 --><beans xmlns ...

  8. Asp.net Mvc 第二回 UrlRouting

    一.什么是UrlRouting 你可以使用UrlRouting来配置一些URL的映射,使用户可以按你的规则来访问网站. 使用UrlRouting,一定要规定URL模式,它包括一个位置标识,它将在你请求 ...

  9. Activity---Fragment---listView的实现

    我们要做的是在Activity中加入一个ViewPager,利用ViewPager的适配器(继承于FragmentPagerAdapter)将Fragment加到其中,而我们在又在Fragment中又 ...

  10. VS2010调试时候未响应

    这几天使用vs2010,调试时候经常未响应,等了半天才缓过来,严重影响心情,决定解决这个问题. 搜寻一番,试着关闭VS,重新设置了vs2010的环境(在vs2010命令提示符下,执行devenv.ex ...