Question

我正在使用以下代码在我的网站（https://howtogetrippedathome.com/）的小部件标题下加双下划线以渐变颜色：

.widget-title:after {
    border-bottom: 6px double;
    -webkit-border-image: -webkit-linear-gradient(left, #ff2828, #F27B26);
}

但是，当我应用此代码时，下划线消失了。我看过其他主题，这应该可以，但是我不知道我在做什么错。

最好，马尔滕

Answer 1

与其使用伪元素（：after），直接尝试：

.widget-title {
    border-bottom: 6px double;
    -webkit-border-image: -webkit-linear-gradient(left, #ff2828, #F27B26);
}

Answer 2

在css3中，请使用带有:: after而不是：after的伪元素。并且请确保您至少要为（content：“”）等伪元素样式保留一个空内容，并指定display属性。

open override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
    super.viewWillTransition(to: size, with: coordinator)

    let videoLayer = self.previewLayer
    coordinator.animate(alongsideTransition: { (context: UIViewControllerTransitionCoordinatorContext) in

        guard let connection = videoLayer?.connection, connection.isVideoOrientationSupported, let orientation = AVCaptureVideoOrientation(rawValue: UIApplication.shared.statusBarOrientation.rawValue) else {
            return
        }

        connection.videoOrientation = orientation
        videoLayer?.frame = self.view.bounds

    }) { (context: UIViewControllerTransitionCoordinatorContext) in
        // handle any completion logic here...
    }
}

以上代码按预期工作。有关更多信息，请参考此link。

Answer 3

像这样简单地使用多个渐变

h1{
  display:inline-block;
  padding-bottom:5px;
  background: 
   linear-gradient(to left,  red, blue),
   linear-gradient(to left,  red, blue); 
  background-size:100% 2px;
  background-position:bottom,0 calc(100% - 5px);
  background-repeat:no-repeat;
}

<h1>some text</h1>

线性渐变边框底部不起作用

3 个答案: