Question

我引用此代码 CSS Border Image Gradient Not Working in Safari 10 但我想在底部边框使用两种颜色组合。为此，我将其修改如下。

下面的代码工作 Mac-Safari :: 9.1.2,10.0 Mac-Chrome :: 60， Windows- Mozilla 56。 Windows-Edge。

apply plugin: 'com.android.application'

android {
compileSdkVersion 25
buildToolsVersion "25.0.3"
defaultConfig {
    applicationId "com.example.mher.loginregister"
    minSdkVersion 25
    targetSdkVersion 19
    versionCode 1
    versionName "1.0"
    testInstrumentationRunner 
"android.support.test.runner.AndroidJUnitRunner"
}
buildTypes {
    release {
        minifyEnabled false
        proguardFiles getDefaultProguardFile('proguard-android.txt'), 
'proguard-rules.pro'
    }
}
}

dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
androidTestCompile('com.android.support.test.espresso:espresso-
 core:2.2.2', {
    exclude group: 'com.android.support', module: 'support-annotations'
})


compile 'com.android.support:appcompat-v7:25.3.1'
compile 'com.android.support.constraint:constraint-layout:1.0.2'
compile 'com.android.volley:volley:1.0.0'
compile 'com.google.firebase:firebase-auth:9.2.0'
compile 'com.google.firebase:firebase-database:10.0.1'
testCompile 'junit:junit:4.12'


}
apply plugin: 'com.google.gms.google-services'

但它在Safari 5.1.7中无法正常工作

＆＃13;

.bluegray-line {
    border-top: 0px;
    border-right: 0px;
    border-left: 0px;
    border-bottom: 1px;
    border-bottom-style: solid;
    line-height: 1;
    padding-bottom: 7px;
    border-image: linear-gradient(to right, #00a9ce 38%, rgba(147, 148, 148, 0.39) 10%) 5;
    -moz-border-image: -moz-linear-gradient(to right, #00a9ce 38%, rgba(147, 148, 148, 0.39) 10%) 5;
    -webkit-border-image: -webkit-linear-gradient(to right, #00a9ce 38%, rgba(147, 148, 148, 0.39) 10%) 5;
    -o-border-image: -o-linear-gradient(to right, #00a9ce 38%, rgba(147, 148, 148, 0.39) 10%) 5;
    -ms-border-image: -ms-linear-gradient(to right, #00a9ce 38%, rgba(147, 148, 148, 0.39) 10%) 5;
}

＆＃13;

.bluegray-bottom {
    border-top: 0px;
    border-right: 0px;
    border-left: 0px;
    border-bottom: 1px;
    border-bottom-style: solid;
    line-height: 1;
    padding-bottom: 7px;
    border-image: linear-gradient(to right, #002159 25%, #939494 15%) 5;
    -moz-border-image: -moz-linear-gradient(to right, #002159 25%, #939494 15%) 5;
    -webkit-border-image: -webkit-linear-gradient(to right, #002159 25%, #939494 15%) 5;
    -o-border-image: -o-linear-gradient(to right, #002159 25%, #939494 15%) 5;
    -ms-border-image: -ms-linear-gradient(to right, #002159 25%, #939494 15%) 5;
}

＆＃13;

当我写（＆＃34;右＆＃34;）而不是（＆＃34;到右＆＃34;）时。那时它适用于Safari 5.1.7，但它不适用于其他浏览器。

Answer 1

Safari 5有一个错误，使用border-image会覆盖元素的背景。也就是说，它不是使用元素的background-color属性，而是使用border-image本身，实际上是对所有内容进行绘制。
比较Safari 5和其他浏览器之间的这个片段。

＆＃13;

body {font-size:16px}

.bluegray-bottom {
    border:0 none;
    border-bottom: 1px solid transparent;
    line-height: 1;
    padding-bottom: 7px;
    background-color:white;
    -webkit-border-image: -webkit-linear-gradient(left, #002159 25%, #939494 15%) 5;
    -moz-border-image: -moz-linear-gradient(to right, #002159 25%, #939494 15%) 5;
    -o-border-image: -o-linear-gradient(to right, #002159 25%, #939494 15%) 5;
    border-image: linear-gradient(to right, #002159 25%, #939494 15%) 5;
}

＆＃13;

<div class="bluegray-bottom">LOG IN</div>

＆＃13;

（请注意，我这里没有Mac或iPad，因此我无法测试其他版本的Safari。我认为此时此错误已得到纠正。）（另请注意，我删除了-ms-prefixed属性，因为它不存在。）

一种解决方法是使用background属性而不是border-color。您可以将背景图像放置在元素中的任何位置，因此，如果您知道字体大小，则可以准确计算背景所需的位置。

＆＃13;

body {font-size:16px}

.bluegray-bottom {
    border:0 none;
    border-bottom: 1px solid transparent;
    line-height: 1;
    padding-bottom: 7px;
    background: white -webkit-linear-gradient(left, #002159 25%, #939494 15%) 0 23px no-repeat;
    background: white -moz-linear-gradient(to right, #002159 25%, #939494 15%) 0 23px no-repeat;
    background: white -o-linear-gradient(to right, #002159 25%, #939494 15%) 0 23px no-repeat;
    background: white linear-gradient(to right, #002159 25%, #939494 15%) 5;
}

＆＃13;

<div class="bluegray-bottom">LOG IN</div>

＆＃13;

顺便说一句，现在使用Safari 5是一个坏主意。 This site表示至少有121个安全问题。有更好更安全的浏览器。

CSS边框图像渐变在Safari 5.1.7中不起作用

1 个答案: