CSS3 代码生成器 | 菜鸟工具

CSS3 代码生成器

尺寸设置

宽度 (px):

高度 (px):

背景设置

背景颜色:

渐变类型:

渐变颜色2:

渐变角度:

45°

边框设置

边框宽度 (px):

边框颜色:

边框样式:

圆角 (px):

阴影效果

阴影 X 偏移:

阴影 Y 偏移:

模糊半径:

阴影颜色:

阴影透明度:

0.3

变换效果

旋转 (度):

缩放:

透明度:

1

滤镜效果

模糊 (px):

亮度:

1

对比度:

1

过渡动画

过渡属性:

过渡时间 (秒):

缓动函数:

悬停效果

悬停缩放:

悬停旋转:

悬停透明度:

0.8

实时预览

CSS3 预览

/* CSS3 代码将在这里显示 */ .preview-element { width: 200px; height: 200px; background: linear-gradient(45deg, #ff9a9e, #fecfef); border-radius: 10px; transition: all 0.3s ease; }