outline 与 border

定义和用法

• outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
  （注意：轮廓不占据空间，也不一定是矩形）
• 可以按顺序定义以下属性：

outline-color: color;
outline-style: solid;      /** solid dotted dashed double ... **/
outline-width: 2px;

或

outline: width style color;

问题

无法定义圆角，如图：

Paste_Image.png

解决方法

1. 在FiewFox中可以使用 outline-radius 实现圆角轮廓，由于是firefox的私有属性，使用是需要加上 -moz-前缀，即

div {
      border: 2px solid #333;
      border-radius: 20px;
      outline: 3px solid #6099f4;
      -moz-outline-radius: 23px;
}

Firefox:

Firefox 浏览器效果

Chome:

Chome 浏览器效果

2. 可以使用 box-shadow 达到同样的效果，box-shadow 缩写范例如下：

box-shadow: 水平偏移 垂直偏移 模糊范围 扩展宽度 颜色;

添加如下样式：

    div {
      margin: 100px auto;
      width: 200px;
      height: 130px;
      border: 2px solid #333;
      border-radius: 20px;
      box-shadow: 0 0 0 3px #6099f4;
    }

Chome 上实现效果：

Chome 浏览器效果