【问题标题】:HR with two colorsHR有两种颜色
【发布时间】:2014-11-26 02:36:57
【问题描述】:

我正在尝试制作一个带有两种颜色的 hr,一种底部为深红色,一种顶部为橙色。附上一张图片,给出了我正在尝试的示例。有没有办法使用纯 CSS 来做到这一点?

编辑:如果没有,有没有办法将 hr 设置为图像?像个PNG?可以拉伸不同尺寸的东西吗?

【问题讨论】:

  • 您可以使用我的答案中添加的伪元素和框阴影
  • 你不需要使用伪元素。

标签: html css stylesheet styling


【解决方案1】:

使用带有 2 个边框的 CSS,如下所示:

hr {
     border-top: 1px solid gray;
     border-bottom: 1px solid white;
}

Example in JSFiddle.

要模仿图片中的内容,让文字漂浮在 HR 上方,您可以执行 this JSFiddle 之类的操作。

【讨论】:

    【解决方案2】:

    另一种解决方案可能是简单地使用 CSS 渐变。像这样:

    hr {
        border: 0;
        height: 1px;
        background: #1e5799;
        background: linear-gradient(to right,  #1e5799 50%,#7db9e8 50%);
    }
    

    【讨论】:

    • 我完全不知道你可以在这样的背景中做渐变!为你投票,好先生。
    【解决方案3】:

    所以如果我理解正确..你想要一个小时..让我们说 1px 高度的蓝色和另一个 1px 高度的红色坐在彼此之上.. 你可以用纯 css 做到这一点,通过使用伪类。

    hr{
    position:relative;
    height:1px;
    background-color:red;
    }
    hr:before {
    position:absolute;
    content : ' ';
    left:0;
    right:0;
    height:1px;
    top:-1px;
    background-color:blue;
    }
    

    【讨论】:

      【解决方案4】:

      您不需要像这样将hrPseudo-elements 一起使用单个元素(Div):

      :root {
          background-color: red;
          text-align: center
      }
      :root:hover {
          background-color: orange;
      }
      div {
          position: relative;
          width: 40px;
          display: inline-block;
          font-style: italic
      }
      
      div:before, div:after{
          content: '';
          position: absolute;
          width: 100px;
          height: 1px;
          background: black;
          top: 50%;
          border-radius: 4px;
          box-shadow: 0 1px 1px white;
      }
      div:before{
          left: -100px;
      }
      div:after{
          right: -100px;
      }
      <div>or</div>

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2023-03-14
        • 2013-07-06
        • 2015-08-12
        • 2013-09-22
        • 1970-01-01
        • 1970-01-01
        • 2012-11-27
        • 2011-08-26
        相关资源
        最近更新 更多