Question

我在这里问了一个a more suitable way to change submit button behaviour的问题，虽然答案已经被接受，因为它很合适，但这并不是预期的效果。

是的，它消除了边框和“提交”按钮内部之间的白色边框，但是此按钮也将在其他地方使用，因此渐变需要平滑。

如果您仔细观察的话，您会发现边界并不是无缝的。我需要一种方法来使渐变看起来好像是整个按钮一样，而且不清楚是否有边框。

在上图中，您可以看到渐变也不是与边框无缝的，有没有办法实现？对于整个表格，您可以看到here。

struct ContentView: View {

    @State var showNextView = false
    var destination = GeorgeView()

    var body: some View {
        NavigationView {
            List {
                HStack(spacing: 0) {
                    NavigationLink(destination: destination, isActive: $showNextView) { EmptyView() }
                    // Rest of your implementation...
                        Button(action: {
                            self.destination = KimView()
                            self.showNextView = true
                        }, label: {
                            Text("Kim")
                            .font(.largeTitle)
                            .background(Color.black)
                            .foregroundColor(.white)
                        })
                }
            }
        }
    }
}

.size {
  width: 30%;
  margin-left: auto;
  margin-right: auto;
}

.site-input-container {
  background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: solid 5px transparent;
  border-radius: 30px;
  margin-bottom: 10px;
  overflow: hidden;
  box-sizing: border-box;
}

.site-submit-container:hover {
  background-image: linear-gradient(-45deg, #006699, #9900CC), radial-gradient(circle at top right, #006699, #9900CC);
}

.site-submit-container:hover input {
  background: transparent;
  color: #fff;
}

input[type=submit] {
  width: 100%;
  padding: 15px;
  display: inline-block;
  border: none;
  outline: none;
  border-radius: 30px;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  background: #FFFFFF;
}

这不是有史以来最引人注目的事情，但也不是理想的选择。因为我不得不使用DIV来包含它，所以需要一种使它看起来无缝的方法，因为普通按钮的处理方式有所不同。我必须保留这一点，因为它是页面设置的方式，并且更容易匹配表单的其余部分。

更清楚为什么按钮较小时需要无缝连接

Answer 1

使用两个线性渐变可以解决此问题。

!npx degit n-waves/multifit -f

无缝渐变填充轮廓上的DIV

1 个答案: