CSS样式在线编辑器

加入收藏夹

使用在线CSS样式编辑工具可以直观地看到某个属性对样式的影响。只需在“CSS样式选项区"设置CSS的任何属性，即可在“CSS样式预览区"实时显示效果。要从代码窗口中删除属性，只需将滑块移至零或将下拉框移至空白即可。要清除已经设置的CSS样式，请点击"重新开始"。

CSS样式选项

边框样式

边框宽度 Border Width: 0px

边框样式 Border Style：
内边距/外边距

内边距 Padding

Padding: 0px

外边距 Margin

Margin: 0px
字体式样

字体 Font:

字体样式 Font Style:

字体粗细 Font Weight:

字体大小 Font Size: 0px

字体变体 Font Variant:

文本行距 Line Height: 0px
文字样式

文字对齐 Text-Align:

文字装饰 Text-Decoration:

首行缩进 Text-Indent: 0px

字间距 Letter-Spacing: 0px

词间距 Word-Spacing: 0px

文本转换 Text-Transform:
背景样式

背景图片 Background-Image:

平铺模式 Background-Repeat:

背景定位 Background-Position:

背景固定 Background-Attachment:
元素定位

定位方式 Position:

Top: 0px

Left: 0px

Right: 0px

Bottom: 0px
附加功能

光标 Cursor:

可见性 Visibility:

溢出 Overflow:

浮动 Float:
CSS3

边框圆角 Border Radius

Width: 0px

文字阴影 Text Shadow

Horizontal Length: 0px

Vertical Length: 0px

Blur: 0px

元素阴影 Box Shadow

Horizontal Length: 0px

Vertical Length: 0px

Blur Radius: 0px

CSS样式预览

设置CSS式样各种属性值后，这里可以实时预览CSS式样的效果，并且在CSS代码区实时生成CSS代码。After setting various property values of the CSS style, you can preview the effect of the CSS style in real time, and generate CSS code in the CSS code area in real time.

CSS代码

#cssDisplay {
background-color: #FFFFFF;
color: #4A0E42;
}

CSS样式在线编辑器

边框样式

内边距/外边距

内边距 Padding

外边距 Margin

字体式样

文字样式

背景样式

元素定位

附加功能

CSS3

边框圆角 Border Radius

文字阴影 Text Shadow

元素阴影 Box Shadow

站长常用工具