蓝色文字
color: #2563eb;文字颜色
改变文字颜色
48 个常用示例
CSS 使用属性和值控制外观
.title { color: #2563eb; font-weight: 700; }
CSS 样式
颜色
控制文字、背景和透明颜色。
浅蓝背景
background-color: #dbeafe;背景颜色
改变元素背景
RGB 蓝色
color: rgb(37, 99, 235);RGB 颜色
使用红绿蓝数值定义颜色
半透明文字
color: rgba(37, 99, 235, .5);RGBA 颜色
最后一个数值控制透明度
50% 透明
opacity: .5;整体透明度
让整个元素半透明
蓝色渐变
background: linear-gradient(90deg, #2563eb, #60a5fa);渐变背景
使用两种颜色创建渐变
文字与字体
控制字号、粗细、对齐和行高。
24px 文字
font-size: 24px;字体大小
设置文字尺寸
粗体文字
font-weight: 700;字体粗细
700 通常表示粗体
居中文字
text-align: center;文字居中
让文字水平居中
第一行文字
第二行文字
第二行文字
line-height: 1.8;行高
调整多行文字距离
H2YNEX
letter-spacing: 4px;字间距
调整字符之间的距离
hello h2ynex
text-transform: uppercase;英文大写
自动转换英文大小写
外距与内距
margin 控制外部距离，padding 控制内部距离。
margin
margin: 20px;全部外距
四个方向加入 20px 外距
顶部外距
margin-top: 20px;顶部外距
只调整元素上方距离
居中区块
margin: 0 auto;水平居中
配合宽度让区块居中
padding
padding: 20px;全部内距
内容与边框保持距离
按钮形状
padding: 10px 24px;上下与左右
第一个值控制上下，第二个控制左右
border-box
box-sizing: border-box;尺寸计算
让宽高包含 padding 和 border
宽度与高度
控制固定尺寸、百分比和最大最小尺寸。
50%
width: 50%;百分比宽度
占父容器一半
200px
width: 200px;固定宽度
设置固定像素宽度
80px 高
height: 80px;固定高度
设置固定像素高度
最大 300px
max-width: 300px;最大宽度
元素不会超过指定宽度
最小 80px
min-height: 80px;最小高度
内容少时也保持最低高度
16:9
aspect-ratio: 16 / 9;宽高比例
自动保持 16:9 比例
边框与圆角
设置边框粗细、样式和圆角。
实线边框
border: 1px solid #2563eb;实线边框
最常见的边框写法
虚线边框
border: 2px dashed #2563eb;虚线边框
使用 dashed 显示虚线
底部边框
border-bottom: 3px solid #2563eb;底部边框
只显示下方边框
12px 圆角
border-radius: 12px;普通圆角
让四个角变圆
活跃
border-radius: 999px;胶囊圆角
使用很大的圆角值
H
border-radius: 50%;圆形
相同宽高配合 50% 圆角
Flex 布局
使用 Flexbox 排列和对齐子元素。
AB
display: flex;启用 Flex
让子元素水平排列
左右
justify-content: space-between;两端对齐
子元素分布在两端
中间
justify-content: center;水平居中
子元素排列在中间
居中
align-items: center;垂直居中
子元素在交叉轴居中
ABC
gap: 16px;项目间距
统一设置子元素间隔
上下
flex-direction: column;垂直排列
改变主轴为上下方向
Grid 布局
使用 CSS Grid 建立规则的二维网格。
AB
display: grid;启用 Grid
建立网格布局容器
123
grid-template-columns: repeat(3, 1fr);平均三列
建立三个相同宽度的栏
12
grid-template-columns: 1fr 2fr;比例栏位
第二栏是第一栏的两倍
123
gap: 12px;网格间距
设置栏与列之间的间隔
跨两栏3
grid-column: span 2;跨越两栏
让项目占据两个栏位
居中
place-items: center;全部居中
同时水平和垂直居中项目
阴影与动画
增加阴影、转换和过渡效果。
阴影卡片
box-shadow: 0 8px 24px rgba(0,0,0,.12);盒子阴影
让区块产生浮起效果
文字阴影
text-shadow: 0 2px 4px rgba(0,0,0,.2);文字阴影
为文字增加阴影
旋转
transform: rotate(-5deg);旋转
让元素旋转指定角度
放大
transform: scale(1.1);缩放
放大或缩小元素
右移
transform: translateX(20px);移动
沿水平或垂直方向移动
将鼠标移到这里
transition: all .2s ease;平滑过渡
让状态变化更自然