7.css3表格、列表、边框的样式设置--list/border

1.css表格

①Border-collapse是否把表格边框合并为单一的边框。Separate默认值,collapse合并。

②Border-spacing分割单元格边框的距离。

③Caption-side设置表格标题的位置。Top默认值,bottom在表格下方。

④Empty-cells是否显示表格中的空单元格。Show默认,hide不显示。

⑤Table-layout设置显示宽度是否随内容拉伸。Auto默认,fixed不拉伸(列宽由表格宽度和列宽度设定)。

2.css列表

①List-style可以把所有属性写在一起。

②List-style-type设置列表标志的类型。

  ⑴disc默认实心圆,None无标记,circle空心圆,square实心方块。

  ⑵Decimal数字,decimal-leading-zero0开头的数字。

  ⑶Lower-roman小写罗马数字,upper-roman大写罗马数字。

⑷Lower-alpha小写英文字母,upper-alpha大写英文字母。

③List-style-position设置列表项标志的位置。Outside默认,inside标志在列表内。

④List-style-image将图像设置为列表项标志。List-style-image(url:../image/1.jpg)

 

3.css边框

①Border可以把所有属性写在一起。

②Border-width设置边框宽度。

③Border-style设置边框样式。

  None无边框。

  Dotted点状边框。

  Dashed虚线。

  Solid实线。

  Double双线。(边框宽度至少大于3px

  Groove定义3d凹槽边框。

  Ridge定义3d垄状边框。

  Inset定义3d inset边框。

  outset定义3d outset边框。

④Border-color设置边框颜色。

⑤Border-bottom/top/left/right设置具体每个边的边框属性。

  Border-bottom-width

  Border-bottom-color

  Border-bottom-style

⑥Border-radius圆角边框属性.

  Border-top-left-radius:2px 4px左上圆角边框(圆角半径一个是2一个是4)

  Border-top-right-radius右上圆角边框

  Border-bottom-left-radius左下圆角边框

  Border-bottom-right-radius右下圆角边框

⑦Border-image边框用图像来填充。

  Border-image-source图像来源路径。

  border-image-slice图像分割方式。

  Border-image-width边框厚度。

  Border-image-outset图像的扩展。(边框图像区域超出边框的量)

  Border-image-repet图像的平铺方式。Stretch拉伸,repeat重复铺满,round重复铺 满并对图片进行调整。

⑧Box-shadow向边框添加一个或多个阴影。

    

   

  

    

   

原文地址:https://www.cnblogs.com/chenJieLing/p/11662981.html