CSS advanced features

1. CSS variable

CSSvariable (也称 for CSS自定义property) is CSS3引入 一项 important features, 允许你 in CSSin定义 and usingvariable, 方便统一management样式值, improvingcode 可maintenance性 and 可reusability.

1.1 CSSvariable basic语法

CSSvariableusing两个连字符 (--) serving as before 缀, 然 after is variable名, through:root伪class in 全局定义, or 者 in specific选择器 in 定义局部variable.

/* 全局variable定义 */
:root {
    --primary-color: #4285F4;
    --secondary-color: #34A853;
    --font-size: 16px;
    --spacing: 20px;
    --border-radius: 8px;
}

/* 局部variable定义 */
.container {
    --container-background: #f0f0f0;
    --container-padding: 20px;
}

/* usingvariable */
.element {
    color: var(--primary-color);
    background-color: var(--container-background);
    font-size: var(--font-size);
    padding: var(--spacing);
    border-radius: var(--border-radius);
}

1.2 CSSvariable features

• inheritance性: CSSvariable会 from 父元素inheritance to 子元素, 除非子元素重 new 定义了相同 variable.
• 作用域: 全局variable可以 in 整个documentationinusing, 局部variable只能 in 定义它 选择器及其子元素inusing.
• 动态性: 可以throughJavaScriptmodifyCSSvariable 值, implementation动态样式变化.
• class型: CSSvariable可以store任何CSS值, including颜色, long 度, 百分比, 字体 big small etc..

1.3 CSSvariableexample

.css-vars-example {
    --primary-color: #4285F4;
    --secondary-color: #34A853;
    --font-size: 18px;
    --padding: 20px;
    --border-radius: 8px;
}

.css-vars-box {
    background-color: var(--primary-color);
    color: white;
    padding: var(--padding);
    border-radius: var(--border-radius);
    font-size: var(--font-size);
    transition: all 0.3s ease;
}

.css-vars-box:hover {
    background-color: var(--secondary-color);
    transform: scale(1.05);
}

2. CSS 渐变

CSS渐变允许你creation from 一个颜色平滑过渡 to 另一个颜色 效果, 而不需要usinggraph片. CSS渐变分 for 两种class型: 线性渐变 (linear-gradient) and 径向渐变 (radial-gradient) .

2.1 线性渐变

线性渐变 is 沿着一条直线 from 一个颜色过渡 to 另一个颜色.

/* basic线性渐变 */
.linear-gradient {
    background: linear-gradient(to right, #4285F4, #34A853);
}

/* 带 has 角度 线性渐变 */
.linear-gradient-angle {
    background: linear-gradient(45deg, #4285F4, #34A853, #FBBC05);
}

/* 带 has 颜色node 线性渐变 */
.linear-gradient-stops {
    background: linear-gradient(to bottom, #4285F4 0%, #34A853 50%, #FBBC05 100%);
}

2.2 径向渐变

径向渐变 is from 一个in心点向 out 辐射 渐变效果.

/* basic径向渐变 */
.radial-gradient {
    background: radial-gradient(circle, #4285F4, #34A853);
}

/* 带 has 形状 and  big  small  径向渐变 */
.radial-gradient-shape {
    background: radial-gradient(ellipse at center, #4285F4 0%, #34A853 100%);
}

/* 带 has 颜色node 径向渐变 */
.radial-gradient-stops {
    background: radial-gradient(circle, #4285F4 0%, #34A853 50%, #FBBC05 100%);
}

2.3 重复渐变

可以usingrepeating-linear-gradient and repeating-radial-gradientcreation重复 渐变效果.

/* 重复线性渐变 */
.repeating-linear {
    background: repeating-linear-gradient(
        45deg,
        #4285F4,
        #4285F4 10px,
        #34A853 10px,
        #34A853 20px
    );
}

/* 重复径向渐变 */
.repeating-radial {
    background: repeating-radial-gradient(
        circle,
        #4285F4,
        #4285F4 10px,
        #34A853 10px,
        #34A853 20px
    );
}

2.4 渐变example

3. CSS 阴影

CSS阴影including文本阴影 (text-shadow) and 盒阴影 (box-shadow) , 用于 for 文本 and 元素添加立体感 and 深度效果.

3.1 文本阴影

文本阴影用于 for 文本添加阴影效果.

/* basic文本阴影 */
.text-shadow {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* how heavy文本阴影 */
.multiple-text-shadow {
    text-shadow: 
        1px 1px 2px rgba(0, 0, 0, 0.5),
        3px 3px 5px rgba(0, 0, 0, 0.3),
        -1px -1px 2px rgba(255, 255, 255, 0.5);
}

/* 彩色文本阴影 */
.colorful-text-shadow {
    color: white;
    text-shadow: 1px 1px 2px #4285F4, 0 0 25px #34A853, 0 0 5px #FBBC05;
}

3.2 盒阴影

盒阴影用于 for 元素添加阴影效果.

/* basic盒阴影 */
.box-shadow {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

/* 带 has 偏移量, 模糊半径 and 扩散半径 盒阴影 */
.box-shadow-advanced {
    box-shadow: 3px 3px 10px 2px rgba(0, 0, 0, 0.2);
}

/*  in 阴影 */
.inner-shadow {
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3);
}

/* how heavy盒阴影 */
.multiple-box-shadow {
    box-shadow: 
        2px 2px 5px rgba(0, 0, 0, 0.3),
        -2px -2px 5px rgba(255, 255, 255, 0.5),
        0 0 10px rgba(66, 133, 244, 0.5);
}

/* 彩色盒阴影 */
.colorful-box-shadow {
    box-shadow: 0 0 10px #4285F4, 0 0 20px #34A853, 0 0 30px #FBBC05;
}

3.3 阴影example

4. CSS 滤镜

CSS滤镜 (filter) 用于 for 元素applicationgraph形效果, such as模糊, 亮度, for 比度, 饱 and 度, 色相旋转etc.. 滤镜可以application于graph片, 背景 and edge框etc..

4.1 常用滤镜function

• blur(): 模糊效果
• brightness(): 亮度调整
• contrast(): for 比度调整
• grayscale(): 灰度效果
• hue-rotate(): 色相旋转
• invert(): 颜色反转
• opacity(): 透明度调整
• saturate(): 饱 and 度调整
• sepia(): 复古褐色效果
• drop-shadow(): 阴影效果 ( and box-shadowclass似, 但可以application于透明元素)
• url(): applicationSVG滤镜

/* 单个滤镜 */
.blur {
    filter: blur(5px);
}

.grayscale {
    filter: grayscale(100%);
}

/*  many 个滤镜组合 */
.multiple-filters {
    filter: brightness(1.2) contrast(1.1) saturate(1.3) hue-rotate(15deg);
}

/* graph片滤镜效果 */
.filtered-image {
    filter: grayscale(100%) blur(2px);
    transition: filter 0.3s ease;
}

.filtered-image:hover {
    filter: none;
}

4.2 滤镜example

滤镜效果example

原graph

灰度

模糊

亮度

for 比度

组合效果

5. CSS 混合模式

CSS混合模式 (mix-blend-mode) 用于定义元素such as何 and 其父元素 and 兄弟元素 in 容混合. 混合模式通常用于creation complex 视觉效果, such asgraph像叠加, 文字特效etc..

5.1 常用混合模式

• normal: 默认值, 不混合
• multiply: 正片叠底, 将颜色相乘, 产生较暗 效果
• screen: 滤色, 将颜色 反相相乘, 产生较亮 效果
• overlay: 叠加, 结合了正片叠底 and 滤色效果, 根据底层颜色 明暗程度决定结果
• darken: 变暗, 保留两个颜色in较暗 部分
• lighten: 变亮, 保留两个颜色in较亮 部分
• color-dodge: 颜色减淡, through降 low for 比度使底层颜色变亮
• color-burn: 颜色加深, through增加 for 比度使底层颜色变暗
• hard-light: 强光, class似于叠加, 但效果更强烈
• soft-light: 柔光, class似于强光, 但效果更柔 and
• difference: 差值, 计算两个颜色 差值, 产生强烈 for 比效果
• exclusion: 排除, class似于差值, 但效果更柔 and
• hue: 色相, using顶层颜色 色相 and 底层颜色 亮度, 饱 and 度
• saturation: 饱 and 度, using顶层颜色 饱 and 度 and 底层颜色 色相, 亮度
• color: 颜色, using顶层颜色 色相 and 饱 and 度, 以及底层颜色 亮度
• luminosity: 亮度, using顶层颜色 亮度 and 底层颜色 色相, 饱 and 度

/* basic混合模式 */
.overlay {
    mix-blend-mode: overlay;
}

.multiply {
    mix-blend-mode: multiply;
}

.screen {
    mix-blend-mode: screen;
}

/* 结合渐变using混合模式 */
.background-gradient {
    background: linear-gradient(45deg, #4285F4, #34A853);
}

.text-mix-blend {
    color: white;
    mix-blend-mode: difference;
}

5.2 混合模式example

6. CSS Grid advancedapplication

CSS Grid布局 is a强 big 二维布局system, 除了basic 网格布局functions out , 还 has 一些advancedapplication, such as网格模板区域, 网格自动布局, 网格 and Flexbox结合usingetc..

6.1 网格模板区域

网格模板区域 (grid-template-areas) 允许你using命名 网格区域来定义 complex 布局, 使布局code更加直观 and 易于maintenance.

.grid-container {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
        "header header header"
        "sidebar main aside"
        "footer footer footer";
    gap: 20px;
    height: 500px;
}

.header {
    grid-area: header;
    background-color: #4285F4;
    color: white;
    padding: 20px;
}

.sidebar {
    grid-area: sidebar;
    background-color: #34A853;
    color: white;
    padding: 20px;
}

.main {
    grid-area: main;
    background-color: #FBBC05;
    color: white;
    padding: 20px;
}

.aside {
    grid-area: aside;
    background-color: #EA4335;
    color: white;
    padding: 20px;
}

.footer {
    grid-area: footer;
    background-color: #666;
    color: white;
    padding: 20px;
}

6.2 网格自动布局

CSS Gridproviding了自动布局functions, 可以根据 in 容自动调整网格 big small and 位置.

6.2.1 grid-auto-columns and grid-auto-rows

用于设置自动creation 网格轨道 big small .

.grid-auto {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100px, auto);
    gap: 10px;
}

6.2.2 grid-auto-flow

用于控制网格项 放置顺序.

/* 默认值: row */
.grid-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: row;
    gap: 10px;
}

/* 列优先 */
.grid-column {
    display: grid;
    grid-template-rows: repeat(3, 100px);
    grid-auto-flow: column;
    gap: 10px;
}

/* 密度优先 */
.grid-dense {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: dense;
    gap: 10px;
}

/* project跨越 many 个轨道 */
.grid-item-large {
    grid-column: span 2;
    grid-row: span 2;
}

6.3 Grid and Flexbox 结合using

Grid and Flexbox is 互补 布局system, 可以结合using来creation更 complex 布局. 通常, Grid用于creation宏观布局 (such as页面布局) , 而Flexbox用于creation微观布局 (such ascomponent in 部布局) .

/* Grid用于页面布局 */
.page-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
        "header header"
        "sidebar main"
        "footer footer";
    gap: 20px;
    min-height: 100vh;
}

/* Flexbox用于component in 部布局 */
.nav-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.card {
    display: flex;
    flex-direction: column;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.card-header {
    padding: 15px;
    background-color: #f0f0f0;
    border-bottom: 1px solid #e0e0e0;
}

.card-body {
    flex: 1;
    padding: 15px;
}

.card-footer {
    padding: 15px;
    background-color: #f0f0f0;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

7. 练习