border和outline区别：
border支持box-sizing: border-box，当有边距时，是新增了边框后在按照以前的边距处理
outline不支持box-sizing: border-box;先处理边距，后加轮廓，有点类似缩放（transform: scale(1.2);）无论轮廓大小样式不影响布局。
css轮廓中outline-width值为length用法，最好有个例子 回复讨论(解决方案) outline-width_CSS参考手册_web前端开发参考手册系列.test{width:200px;padding:10px;outline-width:10px;outline-style:solid;outline-color:#f00;border:3px solid #333;}注意边框线外面的红色轮廓outline-width:10px; PS，IE6/7不支持。 XML/HTML code?123456789101112131415outline-width_CSS参考手册_web前端开发参考手册系列<meta name=...
今天网上看到张鑫旭大神的一篇模拟圆角outline的文章，觉得很强大，很神奇，很流弊，所以赶紧记录下来，供大家分享，学习！ outline有个特性就是它不会占据空间，这是个很强大的属性，但是一般的outline都是方形的，那怎么才能实现绚丽的圆角outline效果了？我们都知道css3中有border-radius属性可以设置圆角，但是如果配合border和border-radius是会增加盒子的大小的！ 这时我们就需要用到box-shadow和border-radius组合来...
outline这个属性平时用的不太多，最近被问及专门研究一下这个属性的作用。 CSS2加进来的outline属性，中文翻译过来是外轮廓。 神马是轮廓？ 轮廓，指边缘；物体的外周或图形的外框。 那这样的话外轮廓就是在外部的边框咯。 看一下正式的定义：outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。outline 属性设置元素周围的轮廓线。 看一下比较实际的体会：在浏览器里，当鼠标点击...
CSS中outline属性是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 例如：在浏览器里，当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候，该元素将会被一个轮廓虚线框围绕。这个轮廓虚线框就是outline 。 一、outline可以按顺序设置如下属性 outline-color ：设置元素轮廓的颜色，其取值与border-color类似。只有当outline-style不为none时才有效。默认为transparent。 outline-style ...
.box { width: 500px; height: 300px; outline: dashed #0082cb; border: 1px solid red; } ontline-style:dashed:定义点状的轮廓； solid double groove:定义3D凹槽轮廓，此效果取决于outline-width的值 ridge:定义3D凹槽轮廓，此效果取决于outline-color值 ...
CSS 轮廓（Outline)实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边距 (padding) 实例 CSS 列表实例 CSS 表格实例 轮廓（Outline)实例 CSS 尺寸 (Dimension) 实例 CSS 分类 (Classification) 实例 CSS 定位 (Positioning) 实例 CSS 伪类 (Pseudo-classes)实例 CSS 伪元素 (Pseudo-elements)实例
× 目录 [1]轮廓样式 [2]轮廓宽度 [3]轮廓颜色 [4]轮廓偏移 [5]复合属性 [6]常见应用 前面的话 轮廓outline处在边框边界的外面，它不像边框那样参与到文档流中，因此轮廓出现或消失时不会影响文档流，即不会导致文档的重新显示。利用轮廓，浏览器可以合并部分轮廓，创建一个连续但非矩形的形状。默认地，轮廓是一个动态样式，只有元素获取到焦点或被激活时呈现 [注意]IE7-浏览器...
border 边框是我们美化网页、增强样式最常用的手段之一。例如： .text { width: 254px; height: 254px; background-color: #33AAE1; border: 10px solid #03D766;} 但有些时候，我们的需求是给一个容器加上多重边框，最容易想到的是给它多加一层标签： .text-outborder { width: 274px; height: 274px; border: 10px solid #03D766;}.text { margin: auto; width: 254px; ...
border和outline区别：