多学一点-css属性border和outline

很多属性我们会正常的使用，但是我们很少去探究这个属性使用的异常情况，以及如何更加准确的使用这些属性来达到效果。今天我们就来学习一下css属性border和outline。

1、outline

• （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用；
• 轮廓线不会占据空间，也不一定是矩形；
• outline-style是必须要写的，且只能为一个值；
• outline-color没有时，outline-color取字体颜色；
• 不显示outlineoutline-style: none;、outline-color: transparent;或outline-width: 0;。

outline的使用

2、border

• 简写属性在一个声明设置所有的边框属性；
• 会占据空间；
• border-style是必须要写的，可以为多个值；
• border-color没有时，border-color取字体颜色；
• 不显示borderborder-style: none/hidden;。

border的使用

3、outline + border

效果会叠加显示。一定要多用浏览器调试，多测试。

outline + border的显示