代码之家 › 专栏 › 技术社区 › Ponsiva

有可能只在左边框上做一个渐变吗?

gradient border css

Ponsiva · 技术社区 · 3 年前

在CSS3中,是否有可能在左边界单独设置梯度?如果有,如何设置?我知道我们可以制作渐变背景,有很多生成器,但我找不到一个能为渐变边框创建代码的生成器,只为左边框。

你知道怎么做吗?

向你问好,希夫

0 回复 | 直到 3 年前

Amaury Hanser 3 年前

border-image 允许您将图像定义到边框,该图像可以是 linear-gradient()

border image CSS属性围绕给定元素绘制图像。它将替换元素的常规边框。

MDN - border-image

边界图像 是所有这些属性的简写:

边界图像
边界图像重复
边界图像切片
边界图像源
边框图像宽度

幸亏 border-image-slice ,只能在左边框上应用渐变。

“CSS图像边界”属性将CSS图像分割为指定的图像边界区域。这些区域构成元素边界图像的组成部分。

MDN - border-image-slice

MDN文档对如何使用提供了很好的解释 边界图像切片 ,但是如果你想让渐变只应用到左边,只需添加 0 0 0 1 重视 边界图像切片 .

header {
  max-width: 40ch;
  padding: 1rem;
  border-width: 2px;
  border-style: solid;
  border-image: 
    linear-gradient(
      to bottom, 
      red, 
      transparent
    ) 0 0 0 1;
}

<header>
  Lorem ipsum dolor sit amet consectetur adipiscing elit
</header>

-1

Pran Paul 3 年前

请尝试以下代码:

#lftGrad{

width:200px;height:200px;border-left:10px solid #ccc;background:#ddd;
border-image:gradient(linear, left top, left bottom, from(#ff00ff), to(#ffff00)) 0 10 0 10 repeat repeat;
-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#ff00ff), to(#ffff00)) 0 10 0 10 repeat repeat;


}

<div id="lftGrad"></div>

推荐文章

StatsNoob · 带tf的张量流梯度。NaN本不应该返回的地方

7 年前

Pythagyros · 使用自定义渐变填充直方图箱

7 年前

Suwash · python中带有“连续双变量”调色板的散点图[重复]

7 年前

Mantvydas Binderis · 如何淡出渐变圆的边

7 年前

alpaca · 在“tf”的输入函数中返回多个值。py\u函数`

7 年前

IOS · 对于Uiimageview,如何在ios swift4中将CGgradient背景色设置为背景色?

7 年前

Johan van den Berg · Swift UITableView中的渐变层

7 年前

Vijayadhas Chandrasekaran · 如何在android中居中渐变色

7 年前

HerrGanzorig · 如何选择渐变过滤器旁边的按钮

7 年前

Sujay U N · SVG矩形和路径渐变

7 年前