zoukankan      html  css  js  c++  java
  • 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向边框添加一个或多个阴影。

        

       

      

        

       

  • 相关阅读:
    JS中使用正则表达式封装的一些常用的格式验证的方法-是否外部url、是否小写、邮箱格式、是否字符、是否数组
    Java中操作字符串的工具类-判空、截取、格式化、转换驼峰、转集合和list、是否包含
    Cocos2d-x 2.0 自适应多种分辨率
    应用自定义移动设备外观
    为移动设备应用程序创建外观
    【2020-11-28】人生十三信条
    【2020-11-27】事实证明,逃避是下等策略
    Python 之web动态服务器
    Python 之pygame飞机游戏
    PHP 之转换excel表格中的经纬度
  • 原文地址:https://www.cnblogs.com/chenJieLing/p/11662981.html
Copyright © 2011-2022 走看看