Как с помощью CSS изменить цвет рамки у нескольких карточек одновременно при наведении курсора?

Этот эффект называется **hover effect** (эффект наведения). Чтобы изменить цвет рамки у нескольких карточек одновременно при наведении курсора, можно использовать CSS псевдокласс `:hover`. Вот пример, как это можно реализовать:

### HTML
```html
<div class="card">Карточка 1</div>
<div class="card">Карточка 2</div>
<div class="card">Карточка 3</div>
```

### CSS
```css
.card {
    border: 2px solid gray; /* Начальный цвет рамки */
    padding: 20px;
    margin: 10px;
    transition: border-color 0.3s; /* Плавный переход цвета рамки */
}

.card:hover {
    border-color: blue; /* Цвет рамки при наведении */
}
```

### Пояснение:
1. **HTML**: Создаем несколько карточек с классом `card`.
2. **CSS**:
   - Определяем стиль для `.card`, задаем начальную рамку и добавляем отступы и расстояние между карточками.
   - Используем `.card:hover`, чтобы сменить цвет рамки на `blue` при наведении курсора на любую карточку.
   - Свойство `transition` добавляет плавный переход цвета рамки.

### Дополнительный эффект
Если вы хотите, чтобы все карточки меняли цвет рамки одновременно при наведении на одну из них, можно добавить общий родительский контейнер:

### HTML (с родителем)
```html
<div class="cards-container">
    <div class="card">Карточка 1</div>
    <div class="card">Карточка 2</div>
    <div class="card">Карточка 3</div>
</div>
```

### CSS (с родителем)
```css
.cards-container:hover .card {
    border-color: blue; /* Цвет рамки всех карточек при наведении на контейнер */
}
```

Теперь цвет рамки всех карточек будет меняться на синий при наведении на любой элемент внутри `cards-container`.