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.
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.
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/
W każdym razie, aby to zrobić z oryginalnym CSS, a nie CSS3? –
@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. –
@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. –
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