Существует ли граница границы xy x?

Скажем, у нас есть простой div и его ширина! = Высота.

<div id="test"></div>

и css выглядит так:

#test {
width: 200px;
height: 50px;
border-radius: 30%;
border: 5px solid black;
}

enter image description here

border-radius в процентах делает более длинную сторону более изогнутой. Значение в px сделает граничную кривую равной:

#test{
border-radius: 30px;
}

enter image description here

Мой вопрос в том, есть ли способ (используя CSS) манипулировать этим пропозицией в px (независимо от изменения размера div) и сделать, например, более короткую сторону div более изогнутой? Или это достижимо только через холст.

+2
источник поделиться
2 ответа

Вы можете использовать два значения с косой чертой между ними, если вы хотите, чтобы все закругленные углы выглядели одинаково, или вы можете использовать селекторы для отдельных углов и использовать два значения без косой черты, чтобы получить независимые результаты для каждого угла, например, в border-top-left-radius: 45px 80px;

Вот три примера (я добавил симметричную, похожую на ту, что в вашем вопросе):

.x {
  width: 300px;
  height: 200px;
  border: 2px solid green;
  border-radius: 45px / 80px;
}
.y {
  width: 300px;
  height: 200px;
  margin-top: 30px;
  border: 2px solid red;
  border-top-left-radius: 45px 80px;
  border-top-right-radius: 125px 60px;
}
.z {
  width: 300px;
  height: 100px;
  margin-top: 30px;
  border: 2px solid blue;
  border-top-left-radius: 80px 65px;
  border-bottom-left-radius: 80px 65px;
  border-top-right-radius: 80px 65px;
  border-bottom-right-radius: 80px 65px;
}
<div class="x"></div>
<div class="y"></div>
<div class="z"></div>
+1
источник

Написав этот вопрос, я нашел ответ: поддержка CSS PIE

Это возможно, используя косую черту между значениями:

border-radius: 10px / 30px;

enter image description here

+3
источник

Связанные вопросы


Похожие вопросы

Посмотрите другие вопросы по меткам или Задайте вопрос