我只想在矩形的一侧设置三边框,而不使用Extra Html标签。到目前为止,我尝试过的代码如下。
方法#1
#element {
width: 100px;
height: 100px;
box-shadow: 0 0 0 3px #000, 0 0 0 6px #f00, 0 0 0 9px #000;
}
<div id="element"></div>
方法#2
#element {
width: 100px;
height: 100px;
border: 3px solid black; /* inner border */
box-shadow: 0px 0px 0px 15px black; /* outer 'border' */
outline: 12px solid green; /* fill */
margin-left: 30px;
margin-top: 30px;
}
<div id="element"></div>
但是这仅在需要全方位使用三边边框的情况下才有用,而不是我只需要在一侧使用三边边框。有可能吗?请帮助我
答案 0 :(得分:4)
使用此CSS属性
box-shadow: 5px 0px 0 0px #000, 10px 0px 0 0px #f00, 15px 0px 0px 0px #000;
#element {
width: 100px;
height: 100px;
box-shadow: 5px 0px 0 0px #000, 10px 0px 0 0px #f00, 15px 0px 0px 0px #000;
}
<div id="element"></div>
答案 1 :(得分:1)
您可以使用before
和after
来实现。
#element {
width: 100px;
height: 100px;
border-right: 5px solid black; /* inner border */
/* box-shadow: 0px 0px 0px 15px black; */ /* outer 'border' */
/* outline: 12px solid green; */ /* fill */
margin-left: 30px;
margin-top: 30px;
}
.triple-right {
position: relative;
}
.triple-right:before, .triple-right:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 5px;
}
.triple-right:before {
background-color: green;
right: -10px;
}
.triple-right:after {
background-color: black;
right: -15px;
}
<div id="element" class="triple-right"></div>
答案 2 :(得分:1)
这是另一个使用渐变的想法:
#element {
width: 100px;
height: 100px;
background:
linear-gradient(#000,#000) right/ 5px 100%,
linear-gradient(red,red) right/ 10px 100%,
linear-gradient(blue,blue) right/ 15px 100%;
/*And so on if you want more border*/
background-repeat:no-repeat;
}
<div id="element"></div>