outline属性
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属性的更多相关文章
- CSS3 border-radius 属性和CSS outline 属性
CSS3 border-radius 属性 border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性. 提示:该属性允许为元素添加圆角边框! 注释:按此顺序设 ...
- css outline属性
outline属性在一个html element的周围画出一条线来,位于边框的外围,起到突出元素的作用.轮廓线不占据任何布局空间,也不一定非要是矩形. p { outline:#00FF00 dott ...
- a:focus{outline: none;} 如何去掉点击链接时周围的虚线框outline属性
1. CSS方式 在IE下是使用html属性:hideFoucs,在HTML标签中加上hidefocus=”true”属性即可,但这个属性是IE私有的,Firefox是不认的. 加了hidefocus ...
- 边框(Border) 和 轮廓(Outline) 属性
border 复合属性.设置对象边框的特性. 标签定义及使用说明 如果上述值缺少一个没有关系,例如border:#FF0000;是允许的. 默认值: not specified 继承: no Java ...
- CSS的outline属性
input标签的outline的三个属性: outline-color outline-style outline-width 当设置input的focus状态的时候可以使用. input:focus ...
- input text的outline属性
普通的text选中编辑时会出现蓝色的边框,感觉不太美观,怎么去掉呢? 可以在text对应的样式里加入:outline: 0;
- CSS3——盒子模型 border(边框) 轮廓(outline)属性 margin外边距 padding填充
盒子模型 包括——边距,边框,填充,和实际内容 Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清 ...
- outline和outline-offset属性实现简单的缝边效果
如果现在有个需求,让你实现下面的样式,你会怎么做呢? 我首先想到的是用 border + box-shadow 实现,代码如下 div { margin: 50px auto; width: 200p ...
- 浏览器兼容性问题——IE不支持却很实用的CSS属性Outline和Child
1. Outline(适用范围:鼠标悬浮hover加外边框) 我们在布局的时候,常常会因为添加边框border影响宽高的布局. 那么,outline是完美的替代品,因为它可以在不影响文档流的情况下呈现 ...
随机推荐
- 在ASP.NET中,IE与Firefox下载文件带汉字名时乱码的解决方法
解决办法: HttpContext.Current.Response.Clear(); HttpContext.Current.Response.Buffer = true; HttpContext. ...
- 使用PullToRefresh实现下拉刷新和上拉加载
使用PullToRefresh实现下拉刷新和上拉加载 分类: Android2013-12-20 15:51 78158人阅读 评论(91) 收藏 举报 Android下拉刷新上拉加载PullToRe ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(14)-系统小结
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(14)-系统小结 不知不觉已经过了13讲,(本来还要讲多一讲是,数据验证之自定义验证,基于园友还是对权限这 ...
- Shell脚本编程——了解你的Linux系统必须掌握的20个命令
要想详细了解你的Linux系统,为系统评估和性能调化提供准确的信息,那么,你会经常用到这几组命令. 一. 系统信息 1. 查看内核版本.编译主机.编译器版本和编译时间的信息 cat /p ...
- alloc、init你弄懂50%了吗?
前言 这是一篇我记录对alloc.init分析思考的笔记.如果读者想看懂我的第二个思考,可能需要您至少了解内存的分段分页管理,如果您对其一点都不知道,可以先看这篇软文简单了解一下.另外很重要的一点是, ...
- 使用PuTTY在Windows中向Linux上传文件
为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/SJQ. http://www.cnblogs.com/shijiaqi1066/p/3843207.html ...
- enter 默认搜索
onkeydown=" if(event.keyCode==13) Search(); "
- instanceof的用法②
其实这个问题以前也困扰过我.我个人理解的一个应用场合就是,当你拿到一个对象的引用时(例如参数), 你可能需要判断这个引用真正指向的类.所以你需要从该类继承树的最底层开始,使用instanceof操作符 ...
- 使用Java BigDecimal进行精确运算
首先我们先来看如下代码示例: public class Test_1 { public static void main(String[] args) { System.out ...
- 认识k_BackingField【转】
事情从Json的序列化和反序列化说起. 在C#2.0的项目中,以前经常使用Json.Net实现序列化和反序列化.后来从c#3.0中开始使用新增的DataContractJsonSerializer进行 ...