副队长CSS教程(33)–圆角与透明

文章目录

• [1. 前言](#1. 前言)
• [2. CSS 圆角 border-radius](#2. CSS 圆角 border-radius)
• • [2.1 概念](#2.1 概念)
  • [2.2 完整示例代码](#2.2 完整示例代码)
  • [2.3 使用要点](#2.3 使用要点)
• [3. CSS 透明效果](#3. CSS 透明效果)
• • [3.1 opacity 属性](#3.1 opacity 属性)
  • • [3.1.1 概念](#3.1.1 概念)
    • [3.1.2 完整示例代码](#3.1.2 完整示例代码)
  • [3.2 rgba 颜色透明](#3.2 rgba 颜色透明)
  • • [3.2.1 概念](#3.2.1 概念)
    • [3.2.2 完整示例代码](#3.2.2 完整示例代码)
  • [3.3 opacity 和 rgba 区别](#3.3 opacity 和 rgba 区别)
• [4. 综合实战：半透明圆角卡片](#4. 综合实战：半透明圆角卡片)
• [5. 总结](#5. 总结)

1. 前言

在网页开发中，透明和圆角是两个使用频率极高的样式。圆角用来美化盒子，告别生硬直角；透明效果可以制作遮罩、半透明卡片。本篇讲解两种实现透明的方式以及圆角属性，每个知识点附带完整可运行代码。

2. CSS 圆角 border-radius

2.1 概念

border-radius 用于设置元素圆角，可以给盒子设置统一圆角，也可以分别指定四个角，支持像素 px、百分比 %。

2.2 完整示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>border-radius 圆角示例</title>
    <style>
        .box1 {
            width: 200px;
            height: 100px;
            background-color: #409eff;
            color: #fff;
            text-align: center;
            line-height: 100px;
            /* 四个角统一圆角 */
            border-radius: 10px;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: #67c23a;
            color: #fff;
            text-align: center;
            line-height: 200px;
            /* 50% 实现圆形，宽高必须相等 */
            border-radius: 50%;
        }
        .box3 {
            width: 200px;
            height: 100px;
            background-color: #e6a23c;
            color: #fff;
            text-align: center;
            line-height: 100px;
            /* 分别设置：左上 右上 右下 左下 */
            border-radius: 20px 0 20px 0;
        }
    </style>
</head>
<body>
    <div class="box1">统一圆角</div>
    <br>
    <div class="box2">圆形盒子</div>
    <br>
    <div class="box3">对角圆角</div>
</body>
</html>

效果如下：

2.3 使用要点

1. 单位 px：固定大小圆角，不会随盒子尺寸变化。
2. 单位 %：圆角大小按盒子宽高百分比计算，宽高相等写 50% 就是圆形。
3. 简写顺序：border-radius: 左上 右上 右下 左下;。

3. CSS 透明效果

3.1 opacity 属性

3.1.1 概念

opacity 设置整个元素的透明度，取值范围 0 ~ 1。

0：完全透明；1：不透明。会让元素内部所有内容（文字、子元素）一起透明。

3.1.2 完整示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>opacity 透明示例</title>
    <style>
        .box-opacity {
            width: 200px;
            height: 100px;
            background-color: #409eff;
            color: #000;
            text-align: center;
            line-height: 100px;
            /* 0.5 半透明 */
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <div class="box-opacity">文字和盒子一起透明</div>
</body>
</html>

效果：

3.2 rgba 颜色透明

3.2.1 概念

rgba 是颜色写法，四个参数：红、绿、蓝、透明度。透明度只作用于当前颜色，不会影响内部文字和子元素 。

透明度取值 0~1。

3.2.2 完整示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>rgba 透明示例</title>
    <style>
        .box-rgba {
            width: 200px;
            height: 100px;
            /* 蓝色，透明度0.4 */
            background-color: rgba(64, 158, 255, 0.4);
            color: #000;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div class="box-rgba">只有背景透明，文字不变</div>
</body>
</html>

效果：

3.3 opacity 和 rgba 区别

1. opacity：整个元素连同文字一起透明；属于元素属性。
2. rgba：仅当前颜色透明（背景色、文字色等），子元素不受影响；属于颜色值。

4. 综合实战：半透明圆角卡片

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>半透明圆角卡片</title>
    <style>
        body {
            background:#ccc;
        }

        .card {
            width: 300px;
            padding: 30px;
            background-color: rgba(255, 255, 255, 0.7);
            border-radius: 16px;
        }
    </style>
</head>

<body>
    <div class="card">
        <h3>半透明圆角卡片</h3>
        <p>背景半透明，文字保持清晰，网页常用卡片样式</p>
    </div>
</body>

</html>

效果：

5. 总结

1. border-radius：实现圆角，px 固定圆角，50% 可画圆形；支持四个角单独设置。
2. opacity：整体透明，子元素文字跟着透明。
3. rgba：颜色级透明，只控制当前颜色，文字不受影响，卡片开发首选。
4. 项目中制作半透明卡片，推荐 rgba + border-radius 组合。