全局使用

:root {
--primary-color: aqua;
--light-color: red;
--secondary-color: blue;
--max-width: 1000px;
--box-1-width: 3;
--box-2-width: 1;
}

里面设置的东西可以全局使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /* 全局使用 */
            :root {
                --primary-color: aqua;
                --light-color: red;
                --secondary-color: blue;
                --max-width: 1000px;
                --box-1-width: 3;
                --box-2-width: 1;
            }
 
            * {
                padding: 0;
                margin: 0;
            }
 
            body {
                font-family: arial, helvetica, sans-serif;
                line-height: 1.4;
                background-color: var(--light-color);
            }
 
            header {
                background-color: var(--primary-color);
                color: #fff;
                border-bottom: 5px solid var(--secondary-color);
                text-align: center;
            }
 
            .container {
                display: flex;
                margin: 0 auto;
                max-width: var(--max-width);
            }
 
            .box {
                background-color: var(--primary-color);
                border-bottom: 5px solid var(--secondary-color:blue);
                color: #fff;
                padding: 1rem;
                margin: 1rem;
            }
 
            .box-1 {
                flex: var(--box-1-width)
            }
             
            .box-2 {
                flex: var(--box-2-width)
            }
        </style>
    </head>
    <body>
        <header>
            <h1>欢迎来到米修在线</h1>
        </header>
        <div class="container">
            <div class="box box-1">
                <h3>标题</h3>
                <p>Lorem ipsum dolor, sit ametconsectetur adipisicing elit. Reminventore ut illo labore,hicquibusdam.
                </p>
            </div>
            <div class="box box-2">
                <h3>标题</h3>
                <p>Lorem ipsum dolor, sit ametconsectetur adipisicing elit. Reminventore ut illo labore,hicquibusdam.
                </p>
            </div>
        </div>
    </body>
</html>