css中outline和border的区别

时间： 发布人：guiytpk1586
css中outline和border的区别

已解决问题

谷歌guiytpk1586用户在提交了关于“什刹海css中outline和border的区别”的提问，欢迎大家涌跃发表自己的观点。目前共有1个回答，最后更新于2025-02-25T14:45:56。希望大家能够帮助她。

详细问题描述及疑问：期待您的答案，真心佩服你,谢谢 ！

希望以下的回答，能够帮助你。

第1个回答

用户名：zh666jas  

1.border
设置元素主要的边框属性，包括border-widt息早德h、border-style、border-color，可缺省，无固定顺序。
e.g民.

[css]viewpla来自incopy
border:red10pxsolid;
border:**xblue;

border-styl问答e
统一设置元素各边框的格式，按照CSS顺序规则。可取的值如下表所示：

CSS顺序规则：当值有4个时，依次按照上、右、下、左设置；当值有3个时，依次按照上、左右、下设置；当值有2个时，依次按照上下、左右设置；当值只有1个时，则为4个委拉说候方向设置为相同的值。以本属性喜诉而迅迫为例：

[css]view陆般plaincopy
border-style:soliddotte培精核老直然而影展ddasheddouble;
/*
上边框为实线
右边框为点状
下边框为虚线
左边框为双送投下守线
*/
border-style:soliddotte财明量径阻ddashed;
/*
上边框为实线
左右边框为点状
下边框为虚线
*/
势用卫溶border-style:soliddotted;
/*
上下边框为实线
左右边框为点状
*/
bor消商课养践差告一罗der-style:被保守形轻某左顶solid;
/*
4个方向的边框都是实线
*/

border-style的默认值随云变短费致之百只象为border-style:none。
border-width
统一设置元素各边框的宽度，按照CSS顺序规则。只有当bord屋胡表聚革宜er-style不为none时才有效迅跑卷妒突载治样时杆。不能设置为负值。值可以是thin（细）、medium（中等）、thick（粗），也可以是数值。默认为border-都笔商陆形阳width:medium。
border-color
统一设置元素的各边框颜色，按照CSS顺序规则。当border-s章终试征向tyle为none或hidden时失效，所以在设置边框颜色前益架本硫需要保border-style的值不为none、hidden。值可以是任意CSS支持的颜色千说试错毫念输值。默认为border-color:transparent。
border-top、border-right、border-bottom、border-left
设置元素的上/右/下/左边框的主要属性，包括border-***-style、border-***-color、border-***-width，可缺省，无固定顺序。
border-top-style、border-right-style、border-bottom-style、border-left-style
设置元素上/右/下/左边框的样式，取值与border-style相同，默认为none。
border-top-width、border-right-width、border-bottom-width、border-left-width
设置元素上/右/下/左边框的宽度，取值与border-width相同。只有当border-***-style不为none时才有效，不能为负值，默认为medium。
border-top-color、border-right-color、border-bottom-color、border-left-color
设置元素上/右/下/左边框的颜色，取值与border-color相同。只有当border-***-style不为none和hidden时才有效。默认为transparent。
2.outline（轮廓）
在元素边框边缘的**绘制一条包围元素的犀包括outline-color、outline-style、outline-width三个子属性的设置，可缺省，无固定顺序。轮廓不占据页面空间，也不一定是矩形。
除了IE以外的浏览器都直接支持outline。只有规定了!DOCUMENT之后的IE8以上版本的浏览器才支持outline。
e.g.
[css]viewplaincopy
outline:solidblack;
outline:dottedthin#0000ff;

outline-style
设置元素轮廓的格式，其取值与border-style类似，但没有hidden值。默认为none，无轮廓。
outline-width
设置元素轮廓的宽度，其取值与border-width类似。只有当outline-style不为none时才有效。默认为medium。
outline-color
设置元素轮廓的颜色，其取值与border-color类似。只有当outline-style不为none时才有效。默认为transparent。

总结：这两者的区别有:
1.outline是不占空间的，既不会增加额外的width或者height
2.outline有可能是非矩形的