Блог

Я делаю некоторый стилистический текст внутри округленных разделов, где текст упирается прямо в верхнюю часть контейнера. Я смог управлять почти всем содержимым, вложенными разделами, изображениями, установленными в качестве фона, и т.д., И Все они были успешно обрезаны, но это доставило мне серьезное огорчение.

Использование границ изображения старой школы или сокрытия не является решением, поскольку у нас есть динамические графические фоны. Нам нужно решение, чтобы фактически обрезать текст.

В основном это видно в Firefox 3.x и более старых версиях Chrome

Вот пример кода, с которым можно поиграть:

http://jsfiddle.net/vfp3v/1/

 div {
    -moz-border-radius: 45px;
    border-radius: 45px;
    background-color: #ccc;
    font-size: 100px;
    color: #777;
    line-height: 70%;
    overflow: hidden;
    width: 257px;
}
  

рывок:

Обратите внимание, что это исправлено в новых Chrome и FireFox 4 — the shui:

Большинство пользователей нашего сайта используют Firefox 3.6, поэтому хотели бы иметь возможность предоставить элегантное решение и для них. Любая помощь приветствуется! Приветствия

Это работает в FF 3.6:http://jsfiddle.net/vfp3v/15

У этого есть некоторые недостатки, как вы можете видеть во втором примере (в FF 3.6) обрезанная граница имеет сплошной цвет, поэтому, если вы используете какой-то фон, это может выглядеть некрасиво. Просто взгляните на это, это может соответствовать вашим потребностям.

Я только что добавил интервал:

 <div><span></span>WXYZ</div>
  

а затем расположил его поверх текста с рамкой того же цвета, что и фон, и смещением размером с границу:

 div{
    position:relative;
    etc...
}
span{ 
    position:absolute; display:block; width:100%; height:100%;
    border:25px solid #fff; top:-25px; left:-25px;
    -moz-border-radius: 70px; border-radius: 70px; /* 45 radius   25 border */       
}
  

редактировать: только что протестировал это в Chrome 10.0.6 (в котором есть ошибка обрезки), и это сработало!

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