Answers:
希望这可以帮助:
#mainDiv {
height: 100px;
width: 80px;
position: relative;
border-bottom: 2px solid #f51c40;
background: #3beadc;
}
#borderLeft {
border-left: 2px solid #f51c40;
position: absolute;
top: 50%;
bottom: 0;
}
<div id="mainDiv">
<div id="borderLeft"></div>
</div>
CSS生成的内容可以为您解决此问题:
div {
position: relative;
}
/* Main div for border to extend to 50% from bottom left corner */
div:after {
content: "";
background: black;
position: absolute;
bottom: 0;
left: 0;
height: 50%;
width: 1px;
}
<div>Lorem Ipsum</div>
(注意- content: "";
为了使伪元素能够呈现,声明是必需的)
该:after
岩石:)
如果您玩了一点,甚至可以将调整大小的边框元素设置为居中显示,或者仅在旁边有另一个元素时才显示(如菜单中所示)。这是带有菜单的示例:
#menu > ul > li {
position: relative;
float: left;
padding: 0 10px;
}
#menu > ul > li + li:after {
content:"";
background: #ccc;
position: absolute;
bottom: 25%;
left: 0;
height: 50%;
width: 1px;
}
使用CSS属性,我们只能控制边框的厚度;不长。
然而,我们可以模仿边界效应并控制其width
和height
为我们与其他一些方面想。
我们可以使用linear-gradient()
CSS创建背景图像并控制其大小和位置,以使其看起来像边框。由于我们可以将多个背景图像应用于一个元素,因此我们可以使用此功能创建多个类似边框的图像,并将其应用于元素的不同侧面。我们还可以用一些纯色,渐变或背景图像覆盖剩余的可用区域。
所需的HTML:
我们需要的只是一个元素(可能有一些类)。
<div class="box"></div>
脚步:
linear-gradient()
。background-size
调整width
/ height
上面创建的图像(S),使得它看起来像一个边界。background-position
调整位置(如left
,right
,left bottom
将上面创建的边界(或多个)等)。必要的CSS:
.box {
background-image: linear-gradient(purple, purple),
// Above css will create background image that looks like a border.
linear-gradient(steelblue, steelblue);
// This will create background image for the container.
background-repeat: no-repeat;
/* First sizing pair (4px 50%) will define the size of the border i.e border
will be of having 4px width and 50% height. */
/* 2nd pair will define the size of stretched background image. */
background-size: 4px 50%, calc(100% - 4px) 100%;
/* Similar to size, first pair will define the position of the border
and 2nd one for the container background */
background-position: left bottom, 4px 0;
}
例子:
用 linear-gradient()
我们,我们可以创建纯色以及具有渐变的边框。下面是使用此方法创建的边框的一些示例。
仅在一侧应用边框的示例:
在两侧应用边框的示例:
在所有边都应用边框的示例:
屏幕截图:
做到这一点的另一种方法是结合使用边界图像和线性渐变。
div {
width: 100px;
height: 75px;
background-color: green;
background-clip: content-box; /* so that the background color is not below the border */
border-left: 5px solid black;
border-image: linear-gradient(to top, #000 50%, rgba(0,0,0,0) 50%); /* to top - at 50% transparent */
border-image-slice: 1;
}
<div></div>
jsfiddle:https ://jsfiddle.net/u7zq0amc/1/
浏览器支持:IE:11+
Chrome:全部
Firefox:15岁以上
为了获得更好的支持,还添加供应商前缀。
这是CSS技巧,不是正式的解决方案。我将代码保留为黑色,因为它可以帮助我定位元素。然后,为您的内容上色(color:white)和(margin-top:-5px左右),使其看起来好像没有句点。
div.yourdivname:after {
content: ".";
border-bottom:1px solid grey;
width:60%;
display:block;
margin:0 auto;
}