CSS制作兩個相框的方法

在CSS中，我們可以使用多種方法制作兩個相框，以下是一種簡單的方法：

1、創(chuàng)建HTML元素

我們需要創(chuàng)建兩個HTML元素，例如div，分別代表兩個相框，每個元素可以包含一個圖片或者其他的媒體內(nèi)容。

<div class="frame1">
  <img src="image1.jpg" alt="Image 1">
</div>
<div class="frame2">
  <img src="image2.jpg" alt="Image 2">
</div>

2、應(yīng)用CSS樣式

我們可以使用CSS來定義相框的樣式，以下是一個基本的樣式示例：

.frame1, .frame2 {
  width: 200px; /* 定義相框的寬度 */
  height: 200px; /* 定義相框的高度 */
  border: 1px solid #000; /* 定義相框的邊框 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 定義相框的陰影 */
}

3、添加交互效果（可選）

為了讓相框更加生動，我們可以添加一些交互效果，例如鼠標(biāo)懸停時放大圖片：

.frame1:hover, .frame2:hover {
  transform: scale(1.2); /* 放大圖片到120% */
}

通過以上步驟，我們可以使用CSS制作出兩個具有交互效果的相框，這只是一個簡單的示例，你可以根據(jù)自己的需求進(jìn)行調(diào)整和優(yōu)化。