Примените радиус угла / закругленные углы к содержимому элемента, а НЕ к заполнению - PullRequest
Новая
       82

Примените радиус угла / закругленные углы к содержимому элемента, а НЕ к заполнению

0 голосов
/ 29 января 2020

У меня есть элемент, к которому я хочу добавить угловой радиус (закругленные углы), но только для самого содержимого, а не для отступов. border-radius, похоже, не имеет каких-либо опций, позволяющих это (название имеет смысл).

то есть закругляет углы синей части изображения ниже, а не зеленой части.

image showing margin, border, padding, content layout of a given element as shown in the layout inspector

По некоторым причинам я не могу обернуть еще один элемент div вокруг элемента, чтобы он выполнял роль заполнителя.

ОБНОВЛЕНИЕ
Контекст заключается в том, что элемент представляет собой область перетаскивания для элементов перетаскивания. Содержимое (синяя область) элемента меняет цвет, когда другой элемент перетаскивается и нависает над ним. Я хочу большой отступ, чтобы область перетаскивания была очень большой, в то время как только меньшая область содержимого меняет цвет, когда происходит зависание.

Ответы [ 2 ]

2 голосов
/ 29 января 2020

Нет способа применить радиус границы к чему-либо кроме границы. Лучше всего было бы поместить <span> внутри вашего <div> вокруг вашего контента. Пролеты сделаны так, чтобы они были встроены в любой div, внутри которого они находятся, и сам промежуток должен оказывать минимальное влияние на стили, и тогда вы можете использовать радиус границы так, как вам хочется.

<div><span class="content">content goes here</span></div>

0 голосов
/ 29 января 2020

Играть с фоном. Вот идея, основанная на этом предыдущем ответе 

.box {
  width:150px;
  height:150px;
  margin:10px;
  border:10px solid yellow;
  padding:10px;
  border-radius:10px; 
  background:
   radial-gradient(farthest-side at bottom right,transparent 98%,green 100%) top left    /25px 25px  content-box,
   radial-gradient(farthest-side at top    right,transparent 98%,green 100%) bottom left /25px 25px  content-box,
   radial-gradient(farthest-side at bottom left ,transparent 98%,green 100%) top right   /25px 25px  content-box,
   radial-gradient(farthest-side at top    left ,transparent 98%,green 100%) bottom right/25px 25px content-box,
   linear-gradient(blue,blue) content-box,
   linear-gradient(green,green) padding-box;
  background-repeat:no-repeat;
}
<div class="box">

</div>

<div class="box" style="padding:50px;">

</div>

Синий - это область содержимого, зеленый - область заполнения, а желтая - граница.

...