23、深入探索 CSS 图形设计：从半透明效果到 3D 变换

深入探索 CSS 图形设计：从半透明效果到 3D 变换

1. 创建半透明对象

在网页设计中，半透明效果能够为页面增添独特的视觉魅力，使元素与背景更好地融合。我们可以使用 CSS 的 opacity 属性来创建半透明对象。 opacity 属性的值范围从 0（完全透明）到 1（完全不透明）。

1.1 示例代码

以下是一个将页面主体设置为 70% 不透明度的示例代码：

body { 
    opacity: 0.7; 
}

1.2 具体操作步骤

若要将图框设置为 55% 的不透明度，可按以下步骤操作：
1. 打开编辑器中的 tb_visual1.css 文件，并滚动到图框样式部分。
2. 在 figure 元素的样式规则中，插入以下样式：

opacity: 0.55;

3. 保存更改并在浏览器中重新加载 tb_komatsu.html 文件，此时图框将变为半透明，部分背景纸张纹理会透过图框显示出来。

2. 使用视觉效果的注意事项

CSS 视觉样式能为网站增添引人注目的效果，但并非所有浏览器都支持这些样式。在应用视觉效果时，需注意以下几点：
- 兼容性设