CSS颜色属性，边框属性

CSS颜色属性复习

color name     颜色英文名称命名

HEX方式         十六进制方式

rgb方式           三原色配色方式

CSS3新增颜色属性

RGBA模式

R:    red         红色        0-255/%

G:    green    绿色        0-255/%

B:    blue       蓝色        0-255/%

A:    alpha     透明度   0~1之间

语法：rgba(r,g,b,a);

HSL模式

HSLA模式

H： Hue(色调)。

0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360

S： Saturation(饱和度)。取值为：0.0% - 100.0%

L： Lightness(亮度)。取值为：0.0% - 100.0%

A:    alpha     透明度   0~1之间

语法:HSLA(H,S,L,A)

HSL色轮

 

透明颜色：

transparent

实例：border实现三角箭头、风车等

透明度：

opacity

取值：0-1之间

注： 低版本的 IE 浏览器不兼容 , 需用 IE 浏览器的滤镜实现相同效果， filter:alpha(opacity=50)

对于低版本的火狐浏览器需添加内核前缀， -moz- opacity

CSS边框属性复习

border: 宽度类型颜色小数不支持

  border-width：边框的宽度   

     thin 细的 

     medium 默认的

     thick 粗的

    不常用

    数值px

  border-style:none 没有边框 = hidden（用于表格除外，用来解决表格边框冲突）

     solid 实线型

     dotted 点状

    dashed 虚线

    double 双线

  border-color:十六进制 #fff  transparent 透明

     border: 1px solid #000;

     border-top: 1px solid #000;上边框

     border-top-width

     border-top-style

     border-top-color

     border-right：

     border-bottom:

     border-left:

CSS3新增边框属性

border-image:  使用图片来填充边框

   border-image-source:图片的来源，路径

     none   没有图片

     url()     图片路径

  border-image-slice：图片的分割方式

    从上，右，下，左方位来分隔图像，将图像分成4个角，4条边和中间区域共9份，中间区域始终是透明的（即没图像填充），除非加上关键字 fill。

   取值：

      number： 边框宽度。不允许负值。

      %： 用百分比指定宽度。不允许负值 。

  border-image-slice:20 fill;

  border-image-width:图片的宽度(不计算在盒子模型宽高内,谷歌会自动加3px)

   具体长度或浮点数值

    百分比

    auto 此情况下与border-image-slice相同

注 : 此值的大小不会累加到盒子模型之上， chrome 会有 3px 的大小，其余浏览器 border 的大 小依然为 0

  border-image-outset: 图片向外扩展的数值  ：具体长度或浮点数值

  border-image-repeat:

  stretch： 拉伸方式来填充边框背景图。

  repeat： 平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。

  round： 平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。

  space： 平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。

border-radius:  边框圆角属性

   border-top-left-radius

   border-top-right-radius

   border-bottom-right-radius

   border-bottom-left-radius