کانتینرعکس دایره - فراغیب

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>طرح دایره‌ای با عکس دلخواه</title>
  <style>
    /* تنظیمات پایه صفحه */
    body {
      margin: 0;
      padding: 0;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ffffff;
      font-family: sans-serif;
    }

    /* ظرف اصلی برای نگهداشتن دایره */
    .icon-wrapper {
      width: 260px;
      height: 260px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* دایره‌ی پس‌زمینه اصلی (با گرادیان و سایه نرم) */
    .circle-bg {
      width: 230px;
      height: 230px;
      border-radius: 50%; /* تبدیل مربع به دایره */
      background: radial-gradient(circle at center, #ffffff 0%, #f4f4f4 70%, #e9e9e9 100%); /* گرادیان ملایم */
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12); /* سایه نرم زیر دایره */
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden; /* برش دادن اضافات عکس */
      position: relative;
    }

    /* تنظیمات عکس دلخواه */
    .custom-image {
      width: 85%; /* ابعاد عکس داخل دایره */
      height: 85%;
      border-radius: 50%; /* دایره‌ای کردن عکس */
      object-fit: cover; /* تنظیم هوشمند عکس بدون کشیدگی */
      border: 3px solid #ffffff; /* حاشیه سفید ظریف دور عکس */
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* سایه کوچک برای عمق دادن به عکس */
    }
  </style>
</head>
<body>

  <!-- ظرف اصلی -->
  <div class="icon-wrapper">
    <!-- دایره پس‌زمینه -->
    <div class="circle-bg">
      <!-- آدرس عکس خود را اینجا قرار دهید -->
   <img src="https://fa.faraghaib.ir/wiki/%D9%BE%D8%B1%D9%88%D9%86%D8%AF%D9%87:Earth.png" alt="عکس دلخواه" class="custom-image"> 
    </div>
  </div>

</body>
</html>