border-image- *屬性可以在CSS3中單獨使用嗎？

有幾個邊框圖像屬性，比如border-image-source，border-image-slice，border-image-width，border-image-repeat，border-image-outset，我在一本書中讀過說，你不應該使用的屬性分別，如：border-image- *屬性可以在CSS3中單獨使用嗎？

.border-image-class { 
    border-image-source: url("image.jpg"); 
    border-image-slice: 10 20 10 20; 
    border-image-releat: repeat; 
}

你我應該寫這樣的：

.border-image-class { 
    border-image: url("image.jpg") 10 20 10 20 repeat 
}

但W3Schools的給予使用的一些例子單獨的屬性： http://www.w3schools.com/cssref/css3_pr_border-image.asp

哪一個是對的？

來源

2014-08-29 zenis

兩種解決方案都是正確的。這取決於編碼器的風格。組合這些值可能會節省一些空間，並且可能會讓某些人感到愉快，而分離的屬性則可確保可讀性。我更喜歡使用SASS中的分隔屬性（除邊距，填充和邊框外）。 – 2014-08-29 03:47:21

任何以簡寫方式存在的屬性也可以使用單獨的longhands來聲明。這包括border-image。

你使用哪一個完全取決於你;但請記住，在聲明shorthands時，您忽略的任何值都將設置爲其初始值。這意味着，如果您在一組比較長的特定規則之後使用簡寫形式，那麼即使未用簡寫形式指定這些長形形式，它們也將被重寫。例如，如果你這樣做：

.border-image-class { 
    border-image-source: url("image.jpg"); 
    border-image: 10 20 10 20 repeat; 
}

，因爲它得到的簡寫替換none的border-image-source聲明將被忽略。

來源

2014-08-29 03:43:03 BoltClock

border-image- *屬性可以在CSS3中單獨使用嗎？

回答

相關問題