CSS双边框，外边框比内边框粗 [英] CSS Double Border with outer border thicker than inner border

问题描述

在我目前的工作中，我需要在容器上生成一个双边框。边框样式：double;实现这一点，然而我的客户希望外边界更厚&

In my current work I'm required to produce a double border on a container. The border-style: double; achieve this, however my client want the outer border to be thicker & the inner border to be of the normal thickness.

除了创建2个div，1个嵌套在另一个内部，外部div有更大的厚度，或者通过使用边框图像有什么办法，我可以做它与CSS只有1 div？指定border-style：double;

Other than creating 2 divs, 1 nested inside another with the outer div having a larger thickness, or through the use of border images is there any way I can do it with CSS with just 1 div? specifying border-style: double; and still be able to make the outer border thicker.

推荐答案

大纲包含在CSS3规范中，允许边框和大纲将应用于单个元素。

Outlines are included in the CSS3 specification and allow both a border and an outline to be applied to a single element.

outline属性与border命令相同。然而，额外的偏移属性允许边框在元素内部或外部移动。

The outline property is identical to the border command. The additional offset property however allows the border to be moved further inside or outside of the element.

我使用轮廓给边框2种不同的颜色，更改代码给你边界2种不同大小。

I used outlines to give borders 2 different colors, change the code to give your borders 2 different sizes.

#box {
border: 1px double #000;
outline: 2px solid #699;
outline-offset: -9px;
}

这篇关于CSS双边框，外边框比内边框粗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！