在CSS中彈出的iPhone

我正在製作一個網站，其設計看起來有點像iPhone UI，而我正在使用彈出窗口。通過彈出（我不知道它實際上是所謂的）我的意思是這樣的事情：在CSS中彈出的iPhone

enter image description here

我的問題是，我將如何做它的按鈕？我試了一下，-webkit-border-image doesn't work.

謝謝！

來源

2012-03-10 Zungy

你嘗試過的例子會有所幫助。 – j08691 2012-03-10 20:20:39

@ j08691我做到了。我說-webkit-border-image不起作用。 – Zungy 2012-03-10 21:27:48

好的@Zungy，我改變了下面的例子，使其更清晰 – Joerg 2012-03-11 00:01:12

有兩種如何做到這一點。一種方法是使用一些webkit CSS屬性，例如-webkit-border-radius。將其與其他webkit-specific properties相結合，你會（在很長一段時間後）得到相當好的結果。

但是，有一個更簡單的方法。您還可以製作一個按鈕圖像（通過拍攝您的屏幕截圖）並將其用作鏈接的背景。比你只需要找到正確的字體，並可能使用一些webkit text shadow：一個簡單的方法來獲得很好的結果！

來源

2012-03-10 21:29:00 Frog

謝謝！真的有幫助！ – Zungy 2012-03-11 00:43:42

我希望我能理解你的問題。
如果你被允許使用CSS3看看爲border-radius

一個例子：（新鏈接）http://jsfiddle.net/MGr3t/2/

CSS：

.button{ 
    border-radius: 8px; 
    background-image: url("http://www.krause-sohn.com/images/background.jpg"); 
    border-color: 1px solid black; 
}

HTML

<input class="button" type="button" value="send"><br/><br/> 
<img class="button" src="http://www.domain.com/background.jpg" width="100" height="40">

來源

2012-03-10 21:19:55 Joerg

沒有..我的意思是使用圖像的按鈕。 – Zungy 2012-03-10 21:26:38

@Zungy以背景圖片爲例，圖片爲按鈕[NEW LINK]（http://jsfiddle.net/MGr3t/2/） – Joerg 2012-03-10 23:57:06

在CSS中彈出的iPhone

回答

相關問題