創建在CSS 3

這裏模糊邊界是我的源圖像：創建在CSS 3

enter image description here

在我的源圖像縮放：

enter image description here

如何只用CSS3實現這一目標的任何想法？注意到元素上方的輕微流血。

來源

2011-11-27 Kirk Ouimet

你爲什麼不接受答案？看起來很不錯。 – Mick

看看css3屬性border-radius。它有x和y偏移顏色和模糊半徑的選項。在你的情況下，如果4px應該工作，灰色沒有偏移和模糊。

來源

2011-11-27 22:08:49

-2

您可能只需將邊框設置爲淺色並勾勒出較暗的顏色，然後設置邊框半徑即可。注我沒有測試過，如果內存服務的輪廓不曲線與邊界半徑。另請注意，border-radius需要設置多個屬性才能兼容跨瀏覽器。有關更多信息，請參閱http://perishablepress.com/press/2008/11/24/perfect-rounded-corners-with-css/。

如果失敗，您可以隨時使用內部div，您設置爲絕對位置，左邊0，右邊0，頂部0和底部0，然後將其用作內邊框或外邊框。然後設置邊界半徑肯定會起作用。

問候，理查德

來源

2011-11-27 22:11:12 ClarkeyBoy

哇從過去那裏閃現 –

倒票是怎麼回事？我的答案完全有效。投票時應該完全有理由給出一個理由。 – ClarkeyBoy

這實際上是兩個CSS3 box-shadow一事無成。

CSS：

#fuzz 
{ 
    height: 100px; 
    width: 100px; 
    border-radius: 5px; 
    border: 1px solid #333; 
    box-shadow: 0px 0px 5px #333, inset 0px 0px 2px #333; 
}

你可以看到它在行動時，我回到編輯小提琴:-)真正的電腦（使用我的平板電腦現在）

顯然改變顏色，以你的口味:)

來源

2011-11-27 22:13:18 Kyle

多框陰影的語法不正確，它們用逗號分隔 – Duopixel

OMG當然是！對不起，我睡了兩個小時:-)會正確的。 – Kyle

它只是用兩個盒子陰影，一個插圖和其他一開始，即：

.box { 
    width: 100px; 
    height: 100px; 
    box-shadow: 0 3px 6px rgba(0,0,0,0.3), inset 0 -3px 3px rgba(0,0,0,0.1); 
    border: solid #ccc 1px; 
    border-radius: 10px; 
    margin: 50px 0 0 50px; 
}

見這裏：http://jsfiddle.net/WYLJv/

來源

2011-11-27 22:15:36 Duopixel

更新：我已經刪除了供應商前綴，因爲幾乎所有的瀏覽器支持這些特性並不需要它們。放棄它們在這一點上被認爲是最佳做法。

看到border-radius和box-shadow的Caniuse頁面。

做到這一點的最好的也是唯一的方法是使用多箱陰影：

element { 
    box-shadow: rgba(0,0,0,0.2) 0px 2px 3px, inset rgba(0,0,0,0.2) 0px -1px 2px; 
    border-radius: 20px; 
}

box-shadow是這樣工作的：

box-shadow: [direction (inset)] [color] [Horizontal Distance] [Vertical Distance] [size];

border-radius是這樣工作的：

border-radius: [size]; 

/*or*/ 

border-radius: [topleft/bottomright size] [topright/bottomleft size]; 

/*or*/ 

border-radius: [topleft] [topright] [bottomright] [bottomleft];

您可以指定高度像這樣的曲線的長度：

border-radius: [tl-width] [tr-width] [br-width] [bl-width]/[tl-height] [tr-height] [br-height] [bl-height];

來源

2011-11-27 22:19:45

不要忘記'border-radius'！ – joshnh

我有點晚了，但是，是的，使用邊界半徑和箱陰影（S），你應該是好去。

.block { 
    border-radius:6px; 
    box-shadow: inset 0px 0px 2px 2px #aaa, 3px 3px 5px 0px #eee; 
}

來源

2011-11-27 22:19:50 JayC

嘗試在CSS中添加border-radius和text-shadow。

.box { 
    border-radius:20px; 
    text-shadow:2px 2px black; 
}

希望這會有所幫助。

來源

2014-08-12 17:18:09 user3817794

創建在CSS 3

回答

相關問題