mask-imageプロパティがブラケットで機能していない

Question

このコードはここでうまくいきますが、「マスクイメージ」プロパティが赤色に見えるかもしれないという点でBRACKET IDEを使用しています。動作していませんが、CODEPENなどで動作する同じコードと、正しい表示でもstackoverflowします。

予想通り透明のエッジが原因BRACKETのIDE上で動作していないマスク-imageプロパティに来ていない...
はここ

nav { 
 
    max-width: 960px; 
 
    mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%); 
 
    margin: 0 auto; 
 
    padding: 60px 0; 
 
} 
 

 
nav ul { 
 
    text-align: center; 
 
    background: linear-gradient(90deg, #7FFFD4 0%, #7FFFD4 25%, #7FFFD4 75%, #7FFFD4 100%); 
 
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6); 
 
} 
 

 
nav ul li { 
 
    display: inline-block; 
 
    padding-left:80px; 
 
} 
 

 
nav ul li a { 
 
    padding: 18px; 
 
    font-family: "Open Sans"; 
 
    text-transform:uppercase; 
 
    color: #000000; 
 
    font-size: 18px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
nav ul li a:hover { 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.1); 
 
    background: rgba(255, 255, 255, 0.6); 
 
    color: rgba(0, 35, 122, 0.7); 
 
}

<nav> 
 
    <ul> 
 
    <li> 
 
     <a href="#">Home</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">About</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">Services</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">Contact</a> 
 
    </li> 
 
    </ul> 
 
</nav>

私はスクリーンショットを添付した画像の説明を入力します。あなたは見ることができます。
] 2] 2] 3] 3

Answer 1

それがライブプレビューエラーだったが、