CSS技巧：圆角、透明、渐变与鼠标效果详解（1课时）

本资源是一节关于前端开发技术的课程，专注于CSS样式设计中的四个关键概念：圆角、透明度、渐变和鼠标交互。课程标题为"08-圆角、透明、渐变、鼠标（1课时）"，内容涵盖了以下几个知识点： 1. **圆角** (border-radius): 圆角是通过`border-radius`属性为矩形元素添加圆弧边缘，支持多种取值方式，如四个角的单独设置、三对角或一对角。例如，`border-top-left-radius`用于指定左上角的圆角。 2. **盒子阴影** (box-shadow): 使用`box-shadow`属性可以为元素添加阴影效果，包括水平和垂直偏移、模糊半径、扩散半径以及阴影颜色和扩散方向。例如，`box-shadow: 10px 5px 10px 5px red outset;`定义了明显的向外扩散阴影。 3. **透明度** (opacity): `opacity`属性控制元素的透明度，取值范围是0（完全透明）到1（完全不透明）。在早期版本的IE中，可能需要使用`filter: alpha(opacity=值)`。注意，0和100是等价的。 4. **渐变色** (gradient): CSS3引入了渐变色功能，可以创建无缝的过渡效果，减少图片请求和页面加载时间。有线性渐变和径向渐变两种类型。基础写法如`background: linear-gradient(red 0%, blue 100%)`，方向可以通过`tobottom`、`topright`等关键字控制，如`background: linear-gradient(to bottom, #fb3664 0%, #4af5db 100%)`。 课程内容还包括了鼠标交互的相关部分，但具体没有在提供的部分中详述。整体来说，这是一节实用的前端CSS教程，适合学习者深入理解并掌握这些基础且重要的视觉效果技巧。