html自动加边框线,html – 在中间创建一个CSS双边框线

使用CSS变换：

为了实现使用CSS的双边框,没有任何问题使它们正确对齐,偏斜变换是最好的选择,因为我们可以随时修正变换发生的点(从而消除任何潜在的对齐问题).然而,我们不能使用这种方法的双边框,因为偏斜变换将导致角形边上的边界线看起来比顶部和底部更接近.为了克服这个问题,我们必须使用一个额外的子元素.

输出是完美的响应,这可以通过查看全页的片段输出来验证.

.double-outer-border {

position: relative;

border-top: 1px solid;

height: 100px;

width: 100%;

overflow: hidden;

}

.double-outer-border:before,.double-outer-border:after,.double-inner-border:before,.double-inner-border:after {

position: absolute;

content: '';

height: 20px;

bottom: 0px;

width: 50%;

transform: skew(-45deg);

}

.double-outer-border:before {

left: -2px;

}

.double-outer-border:after {

right: -2px;

}

.double-inner-border:before {

left: -4px;

bottom: 4px;

}

.double-inner-border:after {

right: 0px;

bottom: 4px;

}

.double-outer-border:before,.double-inner-border:before {

border-bottom: 3px solid;

border-right: 4px solid;

transform-origin: right bottom;

}

.double-outer-border:after,.double-inner-border:after {

border-top: 3px solid;

border-left: 4px solid;

transform-origin: left bottom;

Box-shadow: inset 2px 2px 2px rgba(0,.3);

}

Some content

使用CSS渐变：

下面是一个比较早的一个非常复杂的方法,但是我在这里发贴只是给出一些不同的想法.可以使用线性渐变(以及一点转换)来实现具有倾斜的整个双边框.虽然这会产生预期的产出,但我不会推荐它.使用这种方法只能得到一些想法,可以做什么所有可以做的渐变:)

.double-border {

position: relative;

height: 100px;

width: 100%;

border-top: 1px solid;

overflow: hidden;

}

.double-border:before {

position: absolute;

content: '';

height: 100%;

width: calc(50% + 10px);

left: -10px;

top: 0px;

background: linear-gradient(to right,black 99.9%,transparent 99.9%),linear-gradient(to right,transparent 99.9%);

background-repeat: no-repeat;

background-position: -4.5px 97px,-9px 91px;

background-size: 100% 3px;

}

.double-border:after {

position: absolute;

content: '';

height: 100%;

width: calc(50% + 10px);

left: -10px;

top: 0px;

background: linear-gradient(to right,rgba(0,0.3) 99.9%,transparent 99.9%);

background-repeat: no-repeat;

background-position: -7.5px 75px,-9px 81px,-8.5px 77px,-10px 83px;

background-size: 100% 3px;

transform: scaleX(-1);

transform-origin: right;

}

.slanted-border {

position: absolute;

height: 25px;

width: 25px;

bottom: 3px;

left: 50%;

transform: translateX(-50%) rotate(-45deg);

background: linear-gradient(to right,black 99%,transparent 99%),black 95%,transparent 95%),0.3) 99%,0.3) 95%,transparent 95%);

background-repeat: no-repeat;

background-position: 0px 11px,-2px 17px,0px 13px,-2px 19px;

background-size: 100% 3px;

}

Some Content

使用SVG：

通常,绘制这种形状或复杂线条的最简单的方法是SVG(其也具有响应能力并且可以适应任何尺寸变化的益处),但是对于该SVG使用SVG有一些缺点：

>如果您的标题的高度是恒定的,并且只有宽度根据设备而改变,则SVG将必须拉伸/缩小以适应容器(取决于原始尺寸),这将使中间的倾斜线看起来蜷缩(或)细长. (以全页模式查看该片段.)

> SVG中的笔画也默认缩放.这可以通过将vector-effect属性设置为非缩放笔画来避免,但目前IE不支持此属性,因此此解决方案不兼容于跨浏览器.

path {

stroke: black;

fill: none;

stroke-width: 2;

}

svg {

height: 100px;

width: 100%;

border-top: 1px solid;

}