×
CSS 参考手册CSS 选择器CSS 听觉参考手册CSS Web安全字体组合CSS 动画CSS 单位CSS 颜色CSS 合法颜色值CSS 颜色名称CSS 颜色十六进制值CSS 浏览器支持

CSS 属性

align-contentalign-itemsalign-selfallanimation(动画)animation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionappearancebackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-alignbox-directionbox-flexbox-flex-groupbox-linesbox-ordinal-groupbox-orientbox-packbox-shadowbox-sizingcaption-sideclearclipcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilter(滤镜)flexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weightgrid-columnsgrid-rowshanging-punctuationheighticonjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthnav-downnav-indexnav-leftnav-rightnav-upopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpositionpunctuation-trimquotesresizerightrotationtab-sizetable-layouttargettarget-nametarget-newtarget-positiontext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-outlinetext-overflowtext-shadowtext-transformtext-wraptoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidivertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapz-indexwriting-mode

CSS 合法颜色值


CSS Colors

CSS的颜色可以通过以下方法指定:

  • 十六进制颜色
  • RGB颜色
  • RGBA颜色
  • HSL色彩
  • HSLA颜色
  • 预定义/跨浏览器的颜色名称

十六进制颜色

所有主要浏览器都支持十六进制颜色值。

指定一个十六进制的颜色其组成部分是:#RRGGBB,其中RR(红色),GG(绿色)和BB(蓝色)。所有值必须介于0和FF之间。

<p例如,#0000FF值呈现为蓝色,因为蓝色的组成设置为最高值(FF)而其他设置为0。

实例

p
{
background-color:#ff0000;
}

尝试一下 »


RGB颜色

RGB颜色值在所有主要浏览器都支持。

RGB颜色值指定:RGB(红,绿,蓝)。每个参数(红色,绿色和蓝色)定义颜色的亮度,可在0和255之间,或一个百分比值(从0%到100%)之间的整数。

例如RGB(0,0,255)值呈现为蓝色,因为蓝色的参数设置为最高值(255)而其他设置为0。

此外,下面的值定义相同的颜色:RGB(0,0,255),RGB(0%,0%,100%)。

实例

p
{
background-color:rgb(255,0,0);
}

尝试一下 »


RGBA颜色

RGBA颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+支持。

RGBA颜色值是RGB颜色值alpha通道的延伸 - 指定对象的透明度。

RGBA颜色值指定:RGBA(红,绿,蓝,alpha)。 Alpha参数是一个介于0.0(完全透明)和1.0(完全不透明)之间的参数。

实例

p
{
background-color:rgba(255,0,0,0.5);
}

尝试一下 »


HSL颜色

IE9, Firefox, Chrome, Safari,和Opera 10+.支持HSL颜色值。

HSL代表色相,饱和度和亮度 - 使用色彩圆柱坐标表示。

HSL颜色值指定:HSL(色调,饱和度,明度)。

色相是在色轮上的程度(从0到360)-0(或360)是红色的,120是绿色的,240是蓝色的。饱和度是一个百分比值;0%意味着灰色和100%的阴影,是全彩。亮度也是一个百分点;0%是黑色的,100%是白色的。

实例

p
{
background-color:hsl(120,65%,75%);
}

尝试一下 »


HSLA颜色

HSLA颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+.支持.

HSLA的颜色值是一个带有alpha通道的HSL颜色值的延伸 - 指定对象的透明度。

指定HSLA颜色值:HSLA(色调,饱和度,亮度,α),α是Alpha参数定义的不透明度。 Alpha参数是一个介于0.0(完全透明)和1.0(完全不透明)之间的参数。

实例

p
{
background-color:hsla(120,65%,75%,0.3);
}

尝试一下 »


预定义/跨浏览器的颜色名称

147是在HTML和CSS颜色规范预定义的颜色名称。你可以查看我们的预定义颜色名称表


分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)