CSS outline属性以及和border属性的区别
CSS outline 属性
定义和用法
outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
注释:轮廓线不会占据空间,也不一定是矩形。
outline 简写属性在一个声明中设置所有的轮廓属性。
可以按顺序设置如下属性:
- outline-color
- outline-style
- outline-width
如果不设置其中的某个值,也不会出问题,比如 outline:solid #ff0000; 也是允许的。
可能的值
值 | 描述 |
---|---|
outline-color | 规定边框的颜色。参阅:outline-color 中可能的值。 |
outline-style | 规定边框的样式。参阅:outline-style 中可能的值。 |
outline-width | 规定边框的宽度。参阅:outline-width 中可能的值。 |
inherit | 规定应该从父元素继承 outline 属性的设置。 |
实例
p {border:red solid thin; outline:#00ff00 dotted thick;}
</style>
</head>
<body>
<p><b>注释:</b>只有在规定了 !DOCTYPE 时,Internet Explorer 8 (以及更高版本)才支持 outline 属性。</p>
在浏览器里,当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候,该元素将会被一个轮廓虚线框围绕。这个轮廓虚线框就是 outline 。
outline 能告诉用户那一个可以激发事件的html元素获取了焦点,对钟爱键盘操作的用户尤其有意义。一个清晰悦目的outline设计能提高使用表单的用户体验。 另一方面,outline 也有些讨厌的地方,比如使用CSS设计的Tab(标签页)时,选择一个Tab之后,Tab上的轮廓虚线会一直显示,有些影响美观。
outline 与 border 的区别
border 可应用于几乎所有有形的html元素,而 outline 是针对链接、表单控件和ImageMap等元素设计。从而另一个区别也可以推理出,那就是: outline 的效果将随元素的 focus 而自动出现,相应的由 blur 而自动消失。这些都是浏览器的默认行为,无需JavaScript配合CSS来控制。
另外outline 不会象border那样影响元素的尺寸或者位置,outline不占据空间。
转自w3school,http://my.oschina.net/guomingliang/blog/337169
CSS outline属性以及和border属性的区别相关推荐
- CSS中的margin、border、padding区别 CSS padding margin border属性详解
图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
- CSS 中 的 margin、border、padding 区别 (内边距、外边距)
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一 ...
- CSS简介及常用标签及属性
一.概述 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部引入,比较三种方式的优缺点. 语法:style ...
- css outline color,css outline-color属性怎么用
轮廓是绘制于元素周围的一条线,位于边框边缘的外围.outline-color属性用于设置一个元素整个轮廓中可见部分的颜色.需始终在outline-color属性之前声明 outline-style 属 ...
- html中outline属性,css outline属性怎么用?
CSS outline属性是一个简写属性,用于在一个声明中设置所有的轮廓属性,如颜色.样式.宽度,可在元素周围位于边框边缘的外围绘制一条线,能起到突出元素的作用. CSS outline属性 作用:是 ...
- 巧用CSS的Border属性
. 作者:冯永曜 来源:黄山村夫 制作过网页的人都有为画线而烦恼的经历,本文介绍的小技巧也许对你有所帮助.我们先来认识一下"Border"(画边框),它是CSS的一个属性,用它可以 ...
- CSS Border属性solid(实线)使用介绍
Border(画边框),它是CSS的一个属性,用它可以给能确定范围的HTML标记(如TD.DIV等等)画边框,可以给文本加边框,给导航菜单加分隔线,下面与大家分享个实例,感兴趣的朋友可以了解下 制作过 ...
- php中border属性,css中display属性和border属性常遇问题讲解
本篇文章给大家带来的内容是关于css中display属性和border属性常遇问题讲解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助.因为HTML很少有太复杂的问题,所以直接写一篇关于 ...
- 图解CSS的padding,margin,border属性
图解CSS的padding,margin,border属性(详细介绍及举例说明) 图解CSS的padding,margin,border属性 W3C 组织建议把所有网页上的对像都放在一个盒(box)中 ...
最新文章
- html 点击一行变色,elementui点击table每一行会变色,当有固定列的时候,
- 【机器学习入门到精通系列】大规模机器学习图示
- Castle IOC容器实践之TypedFactory Facility(一)
- JavaScript实现degreeToRadian度到弧度算法(附完整源码)
- AOP的MethodBeforeAdvice
- SAP Spartacus取语言设置的入口程序
- derby数据库的数据_Derby数据库备份
- zblog php 侧边栏样式,ZBlogPHP免费主题Blogs如何修改侧边栏搜索框样式?
- Fiddler工具杂记-存储特定的数据包保存到文件(CustomRules.js基本使用)
- Win8 Metro(C#)数字图像处理--2.50图像运动模糊
- windows笔记-【内核对象线程同步】概述
- jenkind + git + mave + shell + tomcat
- 【演化(进化)算法】遗传算法原理及python实现
- 前端实现Word在线预览
- 服务器卡顿修改dns,电视/盒子太卡了怎么办?教你修改DNS解决卡顿问题
- GPS NMEA码详解
- ArcGIS计算图斑的四邻坐标(XMin,XMax,YMin,YMax)
- java spring boot 微信公众号 分享功能
- IIS服务器开启https
- MAC双系统U盘安装方法