css实现边框内外两条线 |css3 transition ie8

css opacity穿透，按钮 css 动画效果，css溢出影藏代码，css盒子定位的方式，js实现css3特效，css 几种颜色混合，css3 transition ie8 css实现边框内外两条线 |css3 transition ie8

首先，大家来看如何使用border属性实现边框内外两条线。通过设置border属性的值为“2px solid #000”，可以给元素添加一条2像素粗的黑色实线边框。

.element {
border: 2px solid #000;
}

接下来，为了实现边框内外两条线，大家需要再次利用border属性。此时，大家需要使用三个不同的属性值。分别为“border-width”、“border-style”和“border-color”。其中，border-width用于设置边框宽度；border-style用于设置边框样式；border-color用于设置边框颜色。大家将border-width的值设置为1px，border-style的值设置为solid，border-color的值设置为#000。这样，大家就可以在元素内部围起一条1像素粗的黑色实线边框。

.element {
border: 2px solid #000;
border-width: 1px;
border-style: solid;
border-color: #000;
}

接下来，大家使用outline属性实现外边框样式。和border属性一样，outline属性也由三个不同的属性值组成：outline-width、outline-style、outline-color。大家将outline-width的值设置为1px，outline-style的值设置为solid，outline-color的值设置为#000。这样，大家就可以给元素添加一条外部的1像素粗的黑色实线边框。

.element {
border: 2px solid #000;
border-width: 1px;
border-style: solid;
border-color: #000;
outline-width: 1px;
outline-style: solid;
outline-color: #000;
}

通过以上操作，大家就成功地实现了边框内外两条线的效果。需要特别注意的是，border和outline属性的顺序不能颠倒。如果先设置了outline属性，再设置border属性，那么外部的边框会覆盖在边框内部，导致内部的边框看不到。