Блог

Главная - Вопросы по программированию - исследование свойства css для устранения проблемы с квадратным контуром, которая обрезает изображение, как будто на заднем плане есть меньший квадратный контур

исследование свойства css для устранения проблемы с квадратным контуром, которая обрезает изображение, как будто на заднем плане есть меньший квадратный контур

#css

#css

Вопрос:

Я пытаюсь найти свойство CSS, которое отключает дизайн кнопки после ее нажатия.

Я попытался найти свойство CSS в окне проверки, просматривая модель box.

Ниже я поместил изображение и css кнопки:

STYLES.CSS

 .flag-pictures {
background-color: #fff;
border-radius: 50%;
width: 80px;
height: 80px;
text-align: center;
border: 0;
outline: none;
margin: 0px 20px 20px 0px;
background-size: 100%;
}

.flag-button {
position: relative;

background: -webkit-radial-gradient( hsl(54, 100%, 50%), hsl(54, 100%, 40%) );
background: -o-radial-gradient( hsl(54, 100%, 50%), hsl(54, 100%, 40%) );
background: -moz-radial-gradient( hsl(54, 100%, 50%), hsl(54, 100%, 40%) );
background: radial-gradient( hsl(54, 100%, 50%), hsl(54, 100%, 40%) );
font-size: 1.4rem;
color: white;
margin: 20px 20px 20px 0;
padding-left: 0px;

border-left-width: 0px;
border-radius: 100%;
height: 80px;
width: 80px;
z-index: 4;

outline: none;

box-shadow: inset 0 1px 0 hsl(54, 100%, 50%),
          0 2px 0 hsl(54, 100%, 20%),
          0 3px 0 hsl(54, 100%, 18%),
          0 4px 0 hsl(54, 100%, 16%),
          0 5px 0 hsl(54, 100%, 14%),
          0 6px 0 hsl(54, 100%, 12%),
          0 7px 0 hsl(54, 100%, 10%),
          0 8px 0 hsl(54, 100%, 8%),
          0 9px 0 hsl(54, 100%, 6%);
}
.flag-button:hover {
background: -webkit-radial-gradient( hsl(54, 100%, 45%), hsl(54, 100%, 35%) );
background: -o-radial-gradient( hsl(54, 100%, 45%), hsl(54, 100%, 35%) );
background: -moz-radial-gradient( hsl(54, 100%, 45%), hsl(54, 100%, 35%) );
background: radial-gradient( hsl(54, 100%, 45%), hsl(54, 100%, 35%)); 

border-bottom-width: 0px;
height: 80px;
width: 80px;
outline: none;
}

.flag-button:active {
background: -webkit-radial-gradient( hsl(54, 100%, 43%), hsl(54, 100%, 33%) );
background: -o-radial-gradient( hsl(54, 100%, 43%), hsl(54, 100%, 33%) );
background: -moz-radial-gradient( hsl(54, 100%, 43%), hsl(54, 100%, 33%) );
background: radial-gradient( hsl(54, 100%, 43%), hsl(54, 100%, 33%) );

top: 2px;
height: 80px;
width: 80px;
outline: none;

box-shadow: inset 0 1px 0 hsl(54, 100%, 50%),
          0 2px 0 hsl(54, 100%, 20%),
          0 3px 0 hsl(54, 100%, 18%),
          0 4px 0 hsl(54, 100%, 16%),
          0 5px 0 hsl(54, 100%, 14%),
          0 6px 0 hsl(54, 100%, 12%),
          0 7px 0 hsl(54, 100%, 10%);
}

.flag-presentation {
list-style-type: none;
padding-left: 0px;
}

#hiddenMessage {
/* margin-top: 10px; */
font-size: 1.5rem;
font-family: Arial;
}

.profile {
margin-bottom: 100px;
}

.skill-row {
width: 50%;
margin: 100px auto 100px auto;
text-align: left;
}

.skill-pics {
height: 15%;
width: 15%;
border-radius: 100%;
float: left;
margin-right: 30px;
}

.body-h2 {
font-size: 2rem;
color: #66BFBF;
padding: 50px auto 50px auto;
}

h3 {
font-size: 1.5rem;
color: #66BFBF;
}

.footer-link {
margin-right: 20px;
}

INDEX.HTML

 <body>
  <div class="top-container">
    <div class="top-nav">
      <header>
        <nav>
         <ul>
            <li><a href="#skills">Skills</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#contact-me">Contact</a></li>
        </ul>
        </nav>
</div>


<img class="invert" src="images/cloud.png" id="cloud1" alt="cloud-img">
<h1 class="h1-title">I'm Tim Otom</h1>
<h2 class="h2-title">Football dreamer</h2>
<img class="invert" src="images/cloud.png" id="cloud2" alt="cloud-img">
<img src="images/eiffel.png" id="eiffel" alt="eiffel-img">

  </div>
  </header>
  <div class="middle-container">

  <ul class="flag-presentation">


  <button class="flag-button" onclick="revealMessage('Hello!')">
    <li><img class="flag-pictures" src="images/uk.svg" id="1" alt='UK' /></li>
  </button>
  <button class="flag-button" onclick="revealMessage('¡Hola!')">
    <li><img class="flag-pictures" src="images/spain.svg" id="3" alt='Spain' /></li>
  </button>

  <p id="hiddenMessage" style="display:none"></p>


</ul>
</div>
...
</body>

ДЛЯ ИЗОБРАЖЕНИЯ SVG, КОТОРОЕ я ИСПОЛЬЗУЮ, вот оно: https://www.dropbox.com/s/bz1yoonvj99g3gq/uk.svg?dl=1

Я не могу найти этот сбой. Что-нибудь, что вы заметили, неверно? Спасибо за вашу помощь.

Комментарии:

1. По-моему, выглядит правильно: jsfiddle.net/92rupcLt Можете ли вы опубликовать свой HTML-код и, возможно, добавить изображение того, что именно не так?

2. Не могу воспроизвести проблему, я не вижу контура, попробуйте удалить предоставленный вами код, чтобы выделить только проблему. примечание сбоку li должно быть прямым дочерним элементом ul

3. @timotom спасибо. Поскольку вы используете <button> элементы, возможно, вы имеете в виду стили кнопок по умолчанию (серая рамка)? Если да, добавьте border: 0; в свой .flag-button список jsfiddle.net/vcj9kr3L

4. @elveti большое спасибо. Добавление ‘border: 0’ — это решение проблемы.