Возможно ли иметь закругленные углы CSS на iframe?

Ответ 1

Метод контейнера контейнера, описанный в Как получить закругленные углы в iFrame с помощью Border-Radius CSS, работает для меня.

И чтобы сделать это, вы просто оборачиваете iFrame в теги div и присваиваете div следующие свойства css:

<div style="border-radius: 10px; width: 300px; overflow: hidden;">

border-radius должен быть установлен на то, что вы хотите, чтобы округлость была, а width должен быть установлен на ширину рамки, иначе вы получите только несколько (если есть) скругленных углов. Но самое главное - это переполнение : скрытое, поскольку оно скрывает реальные углы iFrames.

Ответ 2

Обертка <iframe> в <div> должна работать.

#wrap {
  width: 320px;
  height: 320px;
  -moz-border-radius: 10px;
  background: red;
  position: relative;
}
iframe {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 10px;
  left: 10px;
}

<div id="wrap">
  <iframe src="http://google.com" />
</div>

Ответ 3

Способ заключается в том, чтобы заключить iframe в круговой тег div, как предлагали другие пользователи. Единственное отличие состоит в том, что вам нужно добавить дополнительную position:relative стиля position:relative оболочки, чтобы она работала в браузере Chrome.

Таким образом, код будет выглядеть так:

.circle {
	width: 320px;
	height: 320px;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	overflow:hidden;
	position:relative;
}

<div class="circle">
  <iframe width="640" height="480" src="https://www.youtube.com/embed/_8CP1tT8tdk" frameborder="0" allowfullscreen></iframe>
</div>

Ответ 4

Возможно, если вы правильно используете его с "обложкой". Некоторые современные темы предлагают это.

Не лучшее решение. Какова ваша цель?

Ответ 5

Вы также можете добавить его в тег iframe, если ваш тег имеет встроенный стиль:

    <iframe 
    width=\"100%\" height=\"100%\"
    frameborder=\"0\" style=\"border:0;border-radius: 25px\";
    src=". $locationlink ." allowfullscreen>
    </iframe>

Ответ 6

Попробуйте добавить это в свой CSS:

iframe {
    border-radius: 10px;
}