时间戳

首页 > 解决方案 > Css 边框顶部和 bot 线性渐变

html - Css 边框顶部和 bot 线性渐变

问题描述

我想在我的 h2 标签的顶部和底部放置一个渐变边框，但边框底部应该是顶部 bo 的反面。

h2 {
  position: relative;
  text-transform: uppercase;
  font-size: 16px;
  color: blue;
  line-height: 36px;
  letter-spacing: 1.6px;
  margin-right: 80px;
  border-style: solid;
  border-width: 3px;
  border-image: linear-gradient(90deg, orange, rgba(253, 142, 41, 0)) 100% 0 100% 0/3px 0 3px 0 stretch;
}
<div class='bloc-content-lower-upper'>
  <h2>Découvrir la technologie</h2>
  <h2>Test</h2>
</div>

在这里，我有一个带有这个渐变的顶部和底部边框，但我想反转底部的颜色。非常感谢您的帮助。

标签： htmlcsssass

解决方案

使用背景：

h2 {
  position: relative;
  text-transform: uppercase;
  font-size: 16px;
  color: blue;
  line-height: 36px;
  letter-spacing: 1.6px;
  padding: 3px 0;
  margin-right:80px;
  background: 
    linear-gradient( 90deg, orange, rgba(253, 142, 41, 0)) top,
    linear-gradient(-90deg, orange, rgba(253, 142, 41, 0)) bottom;
  background-repeat:no-repeat;
  background-size:100% 3px;
 }
<div class='bloc-content-lower-upper'>
  <h2>Découvrir la technologie</h2>
  <h2>Test</h2>
</div>

推荐阅读