例如：.box { border-style :solid ;}.box1{ border-width :5px ;}.box2{ border-color :red ;}.box3{ border-top :1px dashed #00ff00 ;}.box4{ border :1px dotted #0000ff ;}outline和border的区别？
1.border占用空间，outline不占用空间，不会影响元素的尺寸和位置。 2.border 可应用于几乎所有有形的html元素，而 outline 是针对链接、表单控件和ImageMap等元素设计。从而另一个区别也可以推理出，那就是： outline 的效果将随元素的 focus 而自动出现，相应的由 blur 而自动消失。这些都是浏览器的默认行为，无需JavaScript配合CSS来控制。 利用这些特性，大家常用outline来设置悬停的动态效果。之前一直困扰偶的问题：hover加边框会导致元素定位和大小的改变，同事也会影响其他元素位置的改变，现在终于解决了，虽然只是一个小的问题但是还是很开心的~
border是什么的属性？
border属性：border边框属性，可以分别设置上下左右四条边框，只设置显示一边那就是一条线了。
1、Fixed Dialog 样式与 Fixed Single 类似，与其区别在于：以 Dialog 对话框显示，即只有关闭这个窗口之后，程序中该窗口之下的窗口才能响应用户。
2、border 是 CSS 的一个属性，用 border 可以给能确定范围的 HTML 标记（如 TD、DIV 等等）画边框，它可以定义边框线的类型、宽度和颜色，利用这个特性，可以制作一些特殊效果。
3、border占用空间，outline不占用空间，不会影响元素的尺寸和位置。 2.border 可应用于几乎所有有形的html元素，而 outline 是针对链接、表单控件和ImageMap等元素设计。从而另一个区别也可以推理出，那就是： outline 的效果将随元素的 focus 而自动出现，相应的由 blur 而自动消失。