2013-04-02 19 views
7

za pomocą CSS,Jak Blur Div Krawędzie

jak następuje: http://gyazo.com/ff14a415cf7ac8622eb0cada3e23137f

Chcę nami CSS (najlepiej nie CSS3), aby dostać się do krawędzi i narożników mieć taki skutek, a nie tylko ostry egdes.

+0

To jest obraz (chyba, że ​​mówią, że jest ściśle przykładem wyglądu chcesz). Jeśli chcesz zrobić coś podobnego, będziesz musiał sprawdzić granice gradientu za pomocą CSS, choć byłoby łatwiej użyć box-shadow lub obrazu – ntgCleaner

Odpowiedz

18

Można osiągnąć ten efekt za pomocą box-shadow taki sam kolor jak tło div, podobnie jak to:

.blur-box { 
    background-color: #555; 
    box-shadow: 0 0 5px 10px #555; 
} 

Można dostosować drugiego i trzeciego argumentu (5px i 10px tutaj), aby dostosować względną wielkość i rozmyć promień (odpowiednio) cienia, aby uzyskać go tak, jak chcesz, a ta funkcja jest dobrze obsługiwana przez nowoczesne przeglądarki (patrz: http://caniuse.com/#feat=css-boxshadow).

Oto jsFiddle demo: http://jsfiddle.net/bXAFt/

+0

W każdym razie, aby to zrobić z oryginalnym CSS, a nie CSS3? –

+1

@OP CSS3 jest częścią CSS. Lepiej powiesz nam, które przeglądarki chcesz obsługiwać. Stary IE ma filtry, które mogą być używane jako rezerwowe. –

+0

@JamesMitchell: Twój efekt jest nieosiągalny przy CSS <3. Powinieneś naprawdę zadbać o nowoczesne przeglądarki związane z projektowaniem, pisząc swoją witrynę, aby wspierać pełne wdzięku degradacje/progresywne ulepszenia. –

Powiązane problemy