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

Question

Я огляделся, и насколько я вижу, это невозможно, но, скажем, вы встраиваете фрейм YouTube, возможно ли округлить эти углы с помощью CSS?

Answer 1

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

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

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

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

Answer 2

Путь заключается в том, чтобы заключить iframe в круговой тег div, как предлагали другие пользователи. Единственная разница в том, что вам нужно добавить дополнительный стиль 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>

Answer 3

Упаковка <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>

Я прикрепил jsfiddle для демонстрации: http://jsfiddle.net/fxPsC/

Answer 4

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

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

Answer 5

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

iframe {
    border-radius: 10px;
}

Answer 6

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

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