189 8069 5689
大家好，我是半夏????，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 ???? 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！
为抚顺县等地区用户提供了全套网页设计制作服务，及抚顺县网站建设行业解决方案。主营业务为成都做网站、网站制作、成都外贸网站建设、抚顺县网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！
原文链接 ==>http://sylblog.xin/archives/39
日常开发中，我们经常使用border来给元素增加一些美感，但是由于盒子模型的存在，border有时候会影响我们的判断，所以今天我们来介绍另一个属性来为元素增加一些美感。
outlineCSS 中的属性在元素的外部绘制一条线。它类似于边界，除了：
除了IE浏览器，其他浏览器兼容性还是不错的。
outline: [
由此可见outline也是一个缩写的属性。
outline: 1px dashed red;
首先定义一个p标签和一个div标签，然后div标签定义一个5px的border和一个20px的outline
p {
outline: 1px dashed red;
}
div {
border:5px solid #000;
outline: 20px dashed red;
}
outline: 1px dashed red;
outline: 20px dashed red;
最终的效果，可以清楚的看到div上定义的outlin已经跑到了p标签上。
使用span进行测试，使用br进行换行，使得每一行的字数都不一样。
我是outline
我可以创建非矩形
的边框
span {
outline: 1px dashed red;
}
最终效果，可以看见outline只在字上面有。
换成border我们再试试
border:1px solid #000;
乍一看，好像border创建的也是不规则的呀，但是再仔细看，边框其实并不是不规则的，只是换行了而已。
属性值
outline-color: invert;
经测试：最新版的chrome和火狐浏览器不支持此值
仅在IE中测试使用
页面的背景颜色是白色，outline就是黑色。
outline-color: invert;
页面的背景颜色是黑色，outline就是白色。
属性值
1px
3px
5px
outline-width: 10px;
当参数值为正数时，表示轮廓向外偏移
outline-offset: 10px;
当参数值为负值时，表示轮廓向内偏移
outline-offset: -10px;