WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Rahmeneffekt für Bilder mit reinem CSS
1440
ledoc
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
17 May 2024
28 August 2025
Anmelde-/Registrierungsformular (Türkisch)
21 August 2024
HTML
Copy
<div class="roundFrame"> <img src="https://media.glamour.com/photos/65235366b548efb40b0ccb59/master/w_1600%2Cc_limit/Glamour_Look05_0831.jpg" /> </div>
CSS
Copy
.roundFrame { background: url("images/floral.jpg"); margin-left: auto; margin-right: auto; display: table-cell; position: relative; overflow: hidden; width: 300px; box-shadow: inset 0 50px rgba(255, 255, 255, 0.1), inset 2px -15px 30px rgba(0, 0, 0, 0.4), 2px 2px 5px rgba(0, 0, 0, 0.3); padding: 25px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; vertical-align: middle; text-align: center; } .roundFrame img { width: 300px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
