Как сделать размытые границы css
Обновлено: 06.07.2024
Я пытаюсь размыть изображение с помощью CSS. Я использую "размытие", но я нахожу это также размывает границы. Есть ли способ сохранить границу прямой, но размыть остальную часть изображения?
Попробуйте что-то вроде этого:
По какой-то причине, по крайней мере, в Chrome требуется поле для изображения.
Скорее всего, вам понадобится обернуть это изображение в элемент уровня блока и установить его размеры в соответствии с изображением и добавить overflow: hidden
Оберните div вокруг изображения и укажите размер div на несколько пикселей меньше размера изображения (в противном случае край размытия не будет обрезан). Затем поместите overflow:hidden в div.
Сделайте div с рамкой, просто наложите на него изображение, затем размыте изображение.
Чтобы сохранить резкость краев, вы можете сначала переместить изображение в пределах его контейнера влево и увеличить на столько же размытие - это очистит верхний /левый края. Чтобы повысить резкость нижнего /правого края, уменьшите ширину контейнера изображения на 2 * величину размытия.
Похожие вопросы
Популярные теги
Стиль границ элемента,
css-свойство border-style и его производные
Для установки границ элементов CSS предоставляет целый набор свойств, позволяющих задать стиль, толщину и цвет границ как по отдельности для каждой из сторон элемента, так и для всех сторон одновременно. Свойств достаточно много, но описывать их все по отдельности мы не будем, т.к. они очень похожи по своему назначению и легко разбиваются на группы.
Для установки стиля границ используются следующие ненаследуемые свойства border-style, border-top-style, border-bottom-style, border-left-style, border-right-style (см. пример №1 ). Все они могут принимать ряд значений, которые определяют внешний вид границы:
- none – граница не отображается, браузер обнуляет ее толщину (значение используется по умолчанию);
- hidden – в принципе тоже самое, что и none , за исключением того, что в случае применения данного значения к границам ячеек таблицы, у которой значение свойства border-collapse установлено как collapse , граница вокруг ячейки не будет отображаться вообще, включая и совмещенные границы смежных ячеек;
- dotted – линия границы будет иметь точечный вид;
- dashed – линия границы будет иметь пунктирный вид;
- solid – линия границы будет сплошной;
- double – линия границы будет двойной;
- groove – линия границы будет иметь объемный рифленый вид с эффектом вдавленности;
- ridge – линия границы будет иметь объемный рифленый вид с эффектом выпуклости;
- inset – линия границы будет иметь объемный вид с эффектом вдавленности;
- outset – линия границы будет иметь объемный вид с эффектом выпуклости.
Пример №1. Определение стиля границ элементов
Следует отметить, что свойство border-style может принимать через пробел два, три или даже четыре значения (см. пример №2 ):
- одно значение – стиль задается для всех четырех сторон элемента;
- два значения – первое значение задает стиль верхней и нижней границы элемента, второе – правой и левой;
- три значения – первое значение задает стиль верхней границы элемента, второе – правой и левой, третье – нижней границы элемента;
- четыре значения – границы устанавливаются по часовой стрелке: верхняя, правая, нижняя и левая.
Пример №2. Использование сокращенного свойства border-style
Ширина границ элемента,
css-свойство border-width и его производные
Для установки ширины границ используются похожие ненаследуемые свойства border-width, border-top-width, border-bottom-width, border-left-width, border-right-width (см. пример №3 ). Все они могут принимать ряд значений, которые определяют ширину границы:
- ширина – принимаются любые единицы измерения, используемые в CSS ;
- thin – устанавливает тонкую границу;
- medium – устанавливает среднюю границу;
- thick – устанавливает толстую границу.
Опять же, свойство border-width может принимать через пробел два, три или даже четыре значения:
- одно значение – ширина задается для всех четырех сторон элемента;
- два значения – первое значение задает ширину верхней и нижней границы элемента, второе – правой и левой;
- три значения – первое значение задает ширину верхней границы элемента, второе – правой и левой, третье – нижней границы элемента;
- четыре значения – ширина границ устанавливается по часовой стрелке: для верхней границы, затем правой, нижней и левой.
Пример №3. Установка ширины границ элементов
Цвет границ элемента,
css-свойство border-color и его производные
Для установки цвета границ используются ненаследуемые свойства border-color, border-top-color, border-bottom-color, border-left-color, border-right-color (см. пример №4 ). Все они принимают в качестве значений цвет либо специальное значение transparent , делающее рамку прозрачной (бесцветной), при этом сама граница остается, влияя на размеры элемента. Свойство border-color , кроме того, может принимать через пробел два, три или даже четыре значения, которые задают цвет границ по описанному выше алгоритму:
- одно значение – цвет задается для всех четырех сторон элемента;
- два значения – первое значение задает цвет верхней и нижней границы элемента, второе – правой и левой;
- три значения – первое значение задает цвет верхней границы элемента, второе – правой и левой, третье – нижней границы элемента;
- четыре значения – цвет границ устанавливается по часовой стрелке: для верхней границы, затем правой, нижней и левой.
Пример №4. Установка цвета границ элементов
Универсальные css-свойства border,
border-top, border-bottom, border-right и border-left
Имеется возможность задать все характеристики границы элемента одновременно при помощи универсальных ненаследуемых свойств border, border-top, border-bottom, border-left, border-right (см. пример №5 ). Стиль, ширину и цвет при этом нужно указывать через пробел, но в любом порядке.
Пример №5. Установка границ элементов
Скругление границ элемента,
css-свойство border-radius и его производные
Внешний вид границ элементов можно также изменять за счет величины скругления углов границ элементов. Делается это за счет использования ненаследуемых ствойств border-radius, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius. Все они принимают в качестве радиуса значения в любых доступных в CSS единицах измерения, а также процентах, отсчет которых производится относительно ширины блока. Также можно через слеш / задавать сразу два радиуса, если подразумевается сгругление по эллипсу (см. рисунок №6 и пример №7 ). Свойства срабатывают и при отсутствии границ, в этом случае происходит скругление фона элемента.
Рис. №6. Схема скругления углов рамки элемента
Пример №7. Установка радиусов границ элементов
Свойство border-radius, кроме того, может принимать через пробел два, три или даже четыре значения (см. пример №8 ):
- одно значение – радиус задается для всех четырех углов элемента;
- два значения – первое значение задает радиус верхнего левого и нижнего правого углов элемента (расположены по диагонали), второе – верхнего правого и нижнего левого углов элемента (расположены по диагонали);
- три значения – первое значение задает радиус верхнего левого угла элемента, второе – верхнего правого и нижнего левого углов элемента (расположены по диагонали), третье – нижнего правого угла элемента;
- четыре значения – радиусы устанавливаются по часовой стрелке для верхнего левого и верхнего правого углов, затем для нижнего правого и нижнего левого углов элемента.
Пример №8. Использование сокращенного свойства border-radius
Внешняя рамка элемента, css-свойства outline,
outline-style, outline-width и outline-color
Если необходимо выделить элемент внешней рамкой, при этом не влияя на его размеры или положение в документе, используются ненаследуемые свойства outline, outline-style, outline-width, outline-color (см. пример №9 ). Все они могут принимать практически те же значения, что и соответствующие свойства, использующиеся для определения внешнего вида границ элементов. Отличие есть только у свойства outline-color , принимающего вместо специального значения transparent значение invert , которое указывает браузеру на необходимость инверсии цвета для того, чтобы гарантировать видимость границы при любом цвете фона элемента.
Пример №9. Установка контура элементов
Расстояние между внешней и внутренней границами,
css-свойство outline-offset
Для внешних границ дополнительно определено еще одно полезное ненаследуемое свойство outline-offset, которое позволяет задавать расстояние между внешней и внутренней границами. В качестве значения свойство принимает величину расстояния в любых доступных единицах измерения CSS (см. пример №9 ). Кроме того, разрешается использовать и отрицательные значения, тогда рамка будет отображена внутри самого элемента.
На практике, в процессе верстки страниц желательно использовать распространенный прием обнуления всех отступов, показанный в примере №10 . Дело в том, что разные браузеры могут по-разному задавать внутренние и внешние отступы элементов, что может приводить к нежелательным эффектам для веб-мастера. Поэтому лучше обнулить все отступы и задавать их самостоятельно в зависимости от конкретной ситуации.
Пример №10. Обнуление отступов элементов
Создание теней, css-свойство box-shadow
Вместо использования внешней рамки имеется возможность эффективного выделения элементов при помощи теней. Для этого применяется ненаследуемое свойство box-shadow, которое создает одну или несколько теней, значения которых тогда нужно перечислять через запятую. Формат записи свойства имеет вид (см. пример №11 ), где:
- смещение_x – обязательный параметр, который в случае положительных значений смещает тень относительно элемента по горизонтали вправо, а в случае отрицательных значений – влево; если значение параметра равно нулю, то смещение отсутствует;
- смещение_y – обязательный параметр, который в случае положительных значений смещает тень относительно элемента вверх, а в случае отрицательных значений – вниз; если значение параметра равно нулю, то смещение отсутствует;
- размытие – необязательный параметр, который устанавливает радиус размытия тени; чем больше радиус, тем больше тень становится размытой и осветвленной, особенно по краям; если параметр не указывается, то браузер по умолчанию установит радиус размытия равный нулю, в результате чего тень будет полностью четкой с резким контуром;
- растяжение – необязательный параметр, который в случае положительного значения растягивает тень, а в случае отрицательного значения сжимает тень; если же значение не будет установлено, то браузер по умолчанию установит растяжение равное нулю и тень будет иметь те же размеры, что и элемент;
- цвет – определяет цвет тени; т.к. браузеры по умолчанию задают разный цвет тени, то желательно всегда задавать этот необязательный параметр;
- inset – тень будет выводиться внутри элемента, при этом она будет располагаться над фоном, но под любым содержимым элемента; данный параметр не является обязательным и может применяться как в качестве первого параметра, так и последнего в списке;
- none – тень добавляться не будет (используется по умолчанию).
Пример №11. Использование свойства box-shadow
Для указания числовых значений параметров свойства box-shadow разрешается использовать все доступные в CSS единицы измерения, а для указания цвета использовать все доступные в CSS цветовые модели.
Свойство CSS border слажит для создания границы объекта, а именно за толщину рамки, за ее цвет и стиль. Это свойство широко используется в HTML. Можно создавать различные эффекты для лучшего восприятия контента на странице. Например, оформить сайдбар, шапку сайта, меню и т.п.
1. Синтаксис CSS border
- border-width - толщина рамки. Можно задавать в пикселях (px) или воспользоваться стандартными значениями thin, medium, thick (они отличаются только шириной в пикселях)
- border-style - стиль выводимой рамки. Может принимать следующие значения
- none или hidden - отменяет границу
- dotted - рамка из точек
- dashed - рамка из тире
- solid - простая линия (применяется чаще всего)
- double - двойная рамка
- groove - рифленая 3D граница
- ridge , inset , outset - различные 3D эффекты рамки
- inherit - применяется значение родительского элемента
Значения в свойстве CSS border можно задавать в любой последовательности. Чаще всего используют последовательность "толщина стиль цвет".
2. Примеры с различными границами рамок CSS border
2.1. Пример. Разные стили оформления границы рамки border-style
Вот как это выглядит на странице:
2.2. Пример. Изменения цвета рамки при наведении курсора мыши
Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover и рамку CSS border для создания простых эффектов (например, для меню).
Вот как это выглядит на странице:
2.3. Пример. Как сделать прозрачную рамку border
Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P) , где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)
Вот как это выглядит на странице:
3. Толщина границы: свойство border-width
Задает толщину линии. Ранее мы задавали ее в едином описании border.
Синтаксис CSS border-width
- thin - тонкая толщина линии
- medium - средняя толщина линии
- thick - толстая толщина линии
Ниже приведены несколько примеров. Самым необычным будет — это разная толщина границы у каждой стороны.
Вот как это выглядит на странице:
4. Как сделать рамку border только с одного края (границы)
У свойства CSS border есть производные свойства для задания односторонних границ у элемента:
- border-top - для задания рамки сверху (верхняя граница)
- border-bottom - для задания рамки снизу (нижняя граница)
- border-right - для задания рамки справа (правая граница)
- border-left - для задания рамки слева (левая граница)
Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border.
Также есть свойства
- border-top-color - задание цвета верхний границы
- border-top-style - задание стиля верхней границы
- border-top-width - задание толщины верхней границы
- и т.д. для каждого направления
На мой взгляд проще писать все в строчку, чем плодить лишний текст в стилях. Например, следующие свойства будут одинаковыми
4.1. Пример. Красивая рамка для выделения цитат
Вот как это выглядит на странице:
Примечание
Можно задать отдельную границу для каждой из сторон.5. Как сделать несколько границ border у элемента html
Иногда требуется сделать несколько границ. Приведем пример
5.1. Первый вариант с несколькими границами
Вот как это выглядит на странице:
Есть второй способ через наложение теней.
5.2. Наложение теней для создания нескольких границ
Вот как это выглядит на странице:
6. Скругление углов у границ (border-radius)
Для создания красивых рамок используют свойство CSS border-radius (доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например
Более подробно про свойство border-radius читайте в отдельной статье: как скруглить углы у рамок в HTML.
7. Вдавленная линия CSS
Вдавленные линии эффектно могут смотреться на темном фоне, что подходит далеко не каждому сайту.
Используя CSS, как я могу добавить границу размером 100 пикселей ко всем сторонам изображения, состоящего из растянутых и размытых пикселей периметра? например, граница слева от изображения-это просто столбцы 1-3, растянутые горизонтально и размытые вместе?
Я вижу другие посты, объясняющие, как сохранить острые края, но размыть центр.
2 ответа
Таблица имеет следующие атрибуты и связанные с ними CSS: .noborder < граница: 0px; >Тем не менее, он отображается с белой рамкой 1px. Google Chrome Inspector показывает, что в таблице стилей агента пользователя есть связанный стиль.
Если вы хотите размыть изображение до краев и если у вас есть один единственный background-color , вы можете использовать box-shadow с inset для архивирования желаемого поведения:
Смотрите этот фрагмент:
Вы ищете что-то подобное?
Первые два значения задают смещение тени, третье значение-степень размытия, а последнее значение-распространение тени.
Вы можете поиграть с этими значениями, чтобы увидеть, как они изменяют эффект: DEMO
box-shadow -это то, что вы хотите. Я поместил несколько ссылок ниже, которые научат вас всему, что вам нужно знать об этом:
Похожие вопросы:
Я создаю фотогалерею на основе PHP, Javascript с нуля Проблема в том, что я хочу сделать разницу между простой картинкой и фотоальбомом. Так что простые границы изображения выглядят именно так Можно.
Мой код html (см. ниже) по существу состоит из дочернего элемента p , вложенного в родительский элемент article . Этот абзац является единственным потомком article . Добавление границы к p дочернему.
Таблица имеет следующие атрибуты и связанные с ними CSS: .noborder < граница: 0px; >Тем не менее, он отображается с белой рамкой.
Мне просто было интересно, может ли кто-нибудь сказать мне, как добавить левую и правую выцветшие границы на мои веб-страницы, такие как на этом сайте.
Я хотел бы добавить рамку к изображениям в слайд-шоу с помощью ResponsiveSlides.js. Экспериментируя с демонстрационной страницей, которая поставляется со скриптом ResponsiveSlides.js, я обнаружил.
Я вижу проблему рендеринга в IE11, когда речь заходит о нескольких боковых тенях на элементе с закругленной границей. В этом случае я старался не использовать границы, а только боковые тени, чтобы.
CSS границы сужаются по умолчанию (как в левой части этого примера): Есть ли способ заставить границы вести себя так же, как правая сторона примера?
Читайте также: