Question

为什么当我使用线性渐变将透明边框应用于div时，边框在顶部和底部不透明。

div {
  width: 300px;
  height: 300px;
  background: linear-gradient(pink, red);
  border: 20px solid transparent;

}

截图 http://i43.tinypic.com/2r3gjmx.png

Answer 1

@ dimann90在评论中有正确的解决方案。在元素上使用background-repeat: no-repeat。

以下是其工作原理：

默认情况下，背景图像在x和y方向上无限重复。线性渐变是背景图像，该图像的大小由内容框的大小控制（实际上more complicated，但这对我们的目的来说已经足够了）。元素的背景延伸穿过填充和边框（但不是边距）。因此，边框将导致元素框的总大小大于生成的背景图像，并且它将重复。如果边框是透明的，则重复图像将显示。

Answer 2

对于任何正在寻找解决方案的人：

TLDR

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Threading.Tasks;
using Microsoft.VisualStudio.TestTools.UnitTesting;

[TestClass] 
public class ApplicationInitializer
{
    [AssemblyInitialize]
    public static void AssemblyInitialize(TestContext context)
    {
        var waitForApplicationRun = new TaskCompletionSource<bool>();
        Task.Run(() =>
        {
            var application = new Application();
            application.Startup += (s, e) => { waitForApplicationRun.SetResult(true); };
            application.Run();
        });
        waitForApplicationRun.Task.Wait();
    }
    [AssemblyCleanup]
    public static void AssemblyCleanup()
    {
        Application.Current.Dispatcher.Invoke(Application.Current.Shutdown);
    }
}

[TestClass]
public class MyTestClass
{
    [TestMethod]
    public void MyTestMethod()
    {
        // implementation can access Application.Current.Dispatcher
    }
}

说明 https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin

Answer 3

你需要使用这样的东西

div{
  width: 300px;
  height: 300px;
  background: linear-gradient(pink, red);
  border: 20px solid rgba(0,0,0,0.3);
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
}

边框不透明线性渐变

3 个答案: