# shade-border-css

**Repository Path**: jlzhou/shade-border-css

## Basic Information

- **Project Name**: shade-border-css
- **Description**: 底纹和边框是常用的网页元素样式，用于增加元素的视觉吸引力和分隔元素和其他内容。
- **Primary Language**: CSS
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2025-12-10
- **Last Updated**: 2025-12-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 底纹和边框

底纹和边框是常用的网页元素样式，用于增加元素的视觉吸引力和分隔元素和其他内容。

使用说明:

1. 底纹: 可以使用`class="w-shade w-shade-xxx"`属性来设置元素的底纹。
2. 边框: 可以使用`class="w-border w-border-xxx"`属性来设置元素的边框。
3. 原理: 边框和底纹都是通过元素的::before伪元素绝对定位来实现的。所以元素本身必须定位为relative,absolute或fixed。
4. 底纹可以使用css变量`--w-shade-color`来定义底纹颜色，默认值:`#0005`
5. 底纹可以使用css变量`--w-shade-size`来定义底纹式样大小，默认值为:`1`
6. 底纹可以使用css变量`--w-shade-image`来定义底纹蒙版图片，默认值为:`0.png`,建议使用css类`w-shade-xxx`
7. 底纹可以使用css变量`-w-mask-mode`来定义底纹蒙版模式，默认值为:`Alpha`,可选:`luminance`,不建议修改
8. 底纹可以使用css变量`--w-shade-base-size`来定义底纹式样基础大小，默认值为:`.5rem`,`w-shade-xxx`重新定义了

## 底纹

![](./screenshot0.jpg)

## 边框

> 待开发