Большинство веб-дизайнеров используют свойство закругления рамки для закругления кнопок меню, блоков и подобного. С помощью творческого подхода можно еще применить это свойство к изображениям для создания эффекта простой маски. Для начала давайте возьмем изображение и применим к нему обычную рамку с помощью задания класса.

.ghost-town {
        width: 350px; height: 263px;
        border: 2px solid red;
}

После этого добавим свойство закругления границы со значением нескольких десятков пикселей, чтобы скруглить углы:

.ghost-town {
        width: 350px; height: 263px;
        border: 2px solid red;
        border-radius:30px;
}

Чтобы сгладить эффект, добавим скрытие переполнения и сделаем рамку прозрачной. Еще добавим небольшую тень и незначительный поворот:

.ghost-town {
        width: 350px; height: 263px;
        border-radius: 30px;
        overflow: hidden;
        box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
        transform: rotate(4deg) translateZ(0);
}

Теперь невидимая рамка красиво обрезает углы, а поворот вокруг оси Z сглаживает отображение повернутого изображения.

Подобным способом можно создать неизменно популярные фотографии в круглых рамках, показанные ниже. В этом случае задается размер блока и фотография размещается как его фоновое изображение:

.happyface {
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid #000;
    width: 13rem;
    height: 13rem;
    background-image: url('happy-face.jpg');
    background-size: cover;
}

Задавая значение закругления рамки 50% и одинаковые значения ширины и высоты блоку, создаем форму идеальных кругов:

Использована фотография города Берлин в штате Техас Barclay Nix, лицензированная по лицензии Creative Commons, изображения лиц из, к сожалению, более не поддерживаемой системы FaceBox. 

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Создание меню в ромбовидной сетке с использованием CSS
• Использование свойства CSS тени блока
• Улучшенные рамки изображения с помощью режима наложения