outline和border区别详解
分类:实例代码
这两个属性比较类似,无论从表现形式还是语法结构上都是如此。
看如下代码:
/*outline属性设置*/ outline-color: red; outline-width:1px; outline-style:solid; /*border属性设置*/ border-color: red; border-width:1px; border-style:solid;
两个都是复合属性,也可以采用如下形式书写:
/*outline属性设置*/ outline:1px solid red; /*border属性设置*/ border:1px solid red;
但是区别也是巨大的,下面就分别做一下介绍:
(1).border支持box-sizing: border-box,而outline不支持;outline支持outline-offset,border则不支持。
(2).outline不占据空间,也就是他不会对盒模型产生影响,代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> * { padding: 0px; margin: 0px; } div { float:left; outline:20px solid red; } </style> </head> <body> <div>前端教程网一</div> </body> </html>
可以看到元素的左上的outline被遮盖,说明outline是不占据空间的。
(3).outline常用于表单元素,比如表单元素获得焦点的时候可以将其突出显示;经常使用tab键的朋友可能有比较深的体会。
但是这并不是说outline只能用于表单元素。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> * { padding: 0px; margin: 0px; } input { outline-color:blue; } </style> </head> <body> <input type="text"> </body> </html>
当文本框获取焦点的时候,outline就会显示,这样可以突出当前表单元素。
如果你不想让表单元素显示outline,只需要使用如下代码即可:
outline:none
outline和border区别详解,这样的场景在实际项目中还是用的比较多的,关于outline和border区别详解就介绍到这了。
outline和border区别详解属于前端实例代码,有关更多实例代码大家可以查看。