CSS3代码生成器

2024-10-22

文字阴影
Hex/RGBA
盒模型
文字列宽
渐变色
箭头
过渡
滤镜

文字阴影

Your Text Shadow
你的文字阴影
Hex <-> RGBA Converter

十六进制(Hex):

RGBa:
R: G: B:

透明度(Opacity):

RGB:

RGBa:

颜色:
- 变换
  
  旋转:
  
  比例 X:
  
  比例 Y:
  
  斜面 X:
  
  斜面 Y:
  
  偏移 X:
  
  偏移 Y:
- 边框
  
  左上:
  
  右上:
  
  右下:
  
  左下:
  
  边框颜色:
- 盒子阴影
CSS 文字列宽(Columns)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, quae, eos optio ut dicta nemo dolore dolor labore numquam sit beatae rerum corporis illo voluptas neque explicabo perspiciatis officiis tenetur ducimus ad incidunt veritatis fuga consequuntur architecto perferendis a reiciendis distinctio modi repellendus odit illum quas in fugit tempora sequi culpa mollitia voluptatem minus soluta molestiae laborum commodi maiores officia magnam delectus sint! Soluta, ipsam, incidunt, sint nobis dolore sapiente facilis iusto est perferendis dolorum culpa nostrum quos officia excepturi tenetur unde nemo eos architecto optio doloremque a animi molestias odio ab fugiat?一只敏捷的棕色狐狸跳过一只懒惰的狗
- 生成
- 关于
- 列数Columns:
  
  列间隙:
  
  分隔符
- 关于 Columns
  
  CSS列是为您的内容创建“报纸样式”布局的非常简单的方法。有一些可用选项，包括列数，列间距和列之间的规则样式。
  
  Internet Explorer（10+）和Opera支持无供应商前缀的CSS多列布局，因此您只需要-webkit-和-moz-的前缀版本。
- 线型
- 光线型
- 斑纹
- 线型渐变
  
  角度:
  
  添加停止值
- 光线型渐变
  
  类型:
  
  大小:
  
  X 位置:
  
  Y 位置:
  
  添加停止值
- 斑纹渐变
  
  角度:
  
  添加停止值
CSS 箭头
- 生成
- 关于
- 位置:
  
  背景:
  
  边框颜色:
  
  箭头大小:
  
  边框宽度
  
  微调:
- About CSS 箭头
  
  这是关于如何使用：before和：after伪元素来创建诸如工具提示之类的用法的简单箭头，或使内容的一部分引用另一部分的演示。
  
  我正在寻找进一步的选择，以使用纯CSS创建其他各种形状。
过渡动画

你的动画

将鼠标悬停在元素上以查看过渡
- 位置
- 边缘
- 颜色
- 速度
- 顶部:
  
  右方:
  
  底部:
  
  左方:
- 填充:
  
  外边距:
  
  边框宽度:
  
  圆角(边框半径):
- 颜色:
  
  背景颜色:
  
  边框颜色:
- 动画速度:
  
  Cubic Bezier(贝塞尔曲线):
动画时长:
滤镜

标头示例

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, suscipit, animi recusandae aliquam enim facere accusantium amet nam modi iure hic tenetur inventore totam sit aperiam nihil dolorum tempora repellendus.一只敏捷的棕色狐狸跳过一只懒惰的狗
- 主要滤镜
- 投影
- Grayscale(灰度):
  
  Sepia(褐色):
  
  Blur(模糊):
  
  Brightness(亮度):
  
  Hue Rotate(色调):
- Toggle
  水平偏移：
  
  垂直偏移：
  
  模糊半径:
  
  颜色: