gpt4 book ai didi

javascript - 如何使用给定链接中的 css 代码创建垂直线?

转载 作者:搜寻专家 更新时间:2023-10-31 08:16:59 25 4
gpt4 key购买 nike

这是关于 stackoverflow 的另一个问题的链接。

Css code to create horizontal line

我喜欢这条线。这是我在网站上用于水平线的代码:

hr.fancy-line { 
border: 0;
height: 5px;

}
hr.fancy-line:before {
top: -0.5em;
height: 1em;
}
hr.fancy-line:after {
content:'';
height: 0.5em;
top: 1px;
}

hr.fancy-line:before, hr.fancy-line:after {
content: '';
position: absolute;
width: 100%;
}

hr.fancy-line, hr.fancy-line:before {
background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 75%);
}

body, hr.fancy-line:after {
background: #f4f4f4;
}
-Some Text-
<hr class="fancy-line"></hr>

现在我想知道:如何修改这段代码以便能够创建垂直线。这是我使用上面的代码创建水平线的链接:Horizontal lines used

最佳答案

我为元素设置了窄宽度和高高度的样式。

但是,用 <hr> 制作一条垂直线似乎是非语义的,所以你可能想使用 <span>或其他一些元素。

body {
background: #f4f4f4;
}
hr.fancy-line {
border: 0;
height: 180px;
width: 5px;
margin: 0 auto;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
}
<hr class="fancy-line"></hr>


您实现线条的方式取决于您使用它们的上下文。例如,如果线条将分隔页面上的元素,您可能希望将它们创建为伪元素,如下所示:

ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
position: relative;
display: inline-block;
width: 180px;
height: 180px;
background-color: #CCC;
}
ul li:not(:last-child) {
margin: 0 1em 0 0;
}
ul li:not(:last-child):after {
content: "";
position: absolute;
left: 100%;
margin-left: .5em;
height: 100%;
width: 4px;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
}
<ul>
<li></li>
<li></li>
<li></li>
</ul>

关于javascript - 如何使用给定链接中的 css 代码创建垂直线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31710496/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com