2017-09-02 13 views
0

夥計們我知道這段代碼在這裏工作正常,但我使用的是BRACKET IDE,因爲「mask-image」屬性不起作用,可能它顯示爲RED COLOR,所以我認爲它是沒有工作,但相同的代碼工作在CODEPEN等和stackoverflow與正確的顯示。

mask-image屬性不能在括號內工作

如預期由於未在支架IDE工作掩模圖像屬性的邊緣透明不來..
進入這裏描述圖像

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>

我重視截圖你可以看到。
**This is my output[![**This is bracket why it displaying mask-image as red[![**This is the expected one**] 2] 2] 3] 3

回答

0

哦~~耶穌抱歉它是實時預覽的錯誤,但同時直接與任何打開瀏覽它按預期工作......對不起一旦agian

+0

可以刪除題 – Wanjia