округление границ изображения с помощью css не работает при вложении

Question

РЕДАКТИРОВАТЬ: Это должно быть другая проблема с django и как он обновляет CSS. Я сделал несколько изменений в css it сейчас и не вижу изменений при перезагрузке страницы.

Вместе с ним есть некоторые файлы .scss, я тоже их изменил и до сих пор не вижу изменений. Я делаю {% load staticfiles %}, который, возможно, не тянет нужные файлы? Я имею в виду, что это сайт работает, но некоторые изменения не принимаются.

Если закрыть это, так как все работает так, как задумано в Firefox, только не в Chrome?

Я хотел скруглить края изображения в определенном div. Думал, вот как я это сделал:

/* 13.0 Service CSS */
.single-service-area {
  position: relative;
  z-index: 1;
  text-align: center; }
  .single-service-area img {
border-radius: 50%;
  }

  .single-service-area .service-icon {
background-color: #e7f2fd;
width: 145px;
height: 110px;
font-size: 42px;
color: #303030;
text-align: center;
line-height: 110px;
border-radius: 80px 200px 200px 362px;
margin: 0 auto 30px;
-webkit-transition-duration: 500ms;
-o-transition-duration: 500ms;
transition-duration: 500ms; }
  .single-service-area h5 {
font-size: 22px;
display: block;
margin-bottom: 15px;
-webkit-transition-duration: 300ms;
-o-transition-duration: 300ms;
transition-duration: 300ms;
font-weight: 600; }
  .single-service-area:focus .service-icon, .single-service-area:hover .service-icon {
background-color: #1583e9;
color: #ffffff;
-webkit-box-shadow: 0 6px 50px 8px rgba(21, 131, 233, 0.15);
box-shadow: 0 6px 50px 8px rgba(21, 131, 233, 0.15); }
  .single-service-area:focus h5, .single-service-area:hover h5 {
color: #1583e9; }

   <section class="uza-services-area section-padding-80-0">
        <div class="container">
            <div class="row">
                <!-- Section Heading -->
                <div class="col-12">
                    <div class="section-heading text-center">
                        <h2>Our Telescopes</h2>
                    </div>
                </div>
            </div>

            <div class="row">

                <!-- Single Service Area -->
                <div class="col-12 col-lg-4">
                 <div class="single-service-area mb-80">
                  <img src="{% static '/img/bg-img/7.jpg' %}" alt="" ></img>                       
                  <h5>Business Strategy</h5>
                  <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet gubergren no sea takimata.</p>
                </div>
               </div>
       
<!-- Single Service Area -->
                <div class="col-12 col-lg-4">
                    <div class="single-service-area mb-80">
                        <!-- Service Icon -->
                        <div class="service-icon">
                            <i class="icon_piechart"></i>
                        </div>
                        <h5>Market Analytics</h5>
                        <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet gubergren no sea takimata.</p>
                    </div>
                </div>

                <!-- Single Service Area -->
                <div class="col-12 col-lg-4">
                    <div class="single-service-area mb-80">
                        <!-- Service Icon -->
                        <div class="service-icon">
                            <i class="icon_easel"></i>
                        </div>
                        <h5>Marketing Social</h5>
                        <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet gubergren no sea takimata.</p>
                    </div>
                </div>

            </div>
        </div>
    </section>

Но это не сработает, если я переместу часть img css за пределы класса. Работает нормально .... (но конечно для всех изображений в div или нет)

Answer 1

<img class="test" src="{% static '/img/bg-img/7.jpg' %}" alt="" ></img>   


.test{
border-radius: 50%;
  }

попробуй так. Посмотри, работает ли это.