CSS(三)背景 list-style display visibility opacity vertical cursor

背景background

  1.background-color:''    背景颜色

  2.background-image:''  背景图片

    background-repeat:'' 背景图片是否平铺

      取值:  repeat   (默认)垂直和水平平铺

           repeat-x  仅在水平方向平铺

           repeat-y  仅在垂直方向平铺

           no-repeat  不平铺   仅显示一个

  3.属性设置背景图的起始位置

    background-position:x,y  

  4.背景图尺寸

    background-size

      取值 :宽度,高度   如果只设置一个值  则另一个值为 auto

        cover  充满  等比缩放  至  最小   的一边充满

        contain 充满  等比缩放  至  最大  的一边充满

  5.定义背景图片遂滚动条的  移动方式 attachment

    scroll  默认值 不对视口固定

    fixed  相对视口定位

  backgroun的 组合使用

    background: url() no-repeat attachment position color

  线性渐变

    background-image:-webkit-linear-gradient(top, red, 0, 50%, yellow 100%)

    第一个值可以是 top right left bottom 

  -webkit-  chrome

  -moz-   firefox

  -o-    opon

  -ms-    IE

  径向渐变

    background-image: -webkit-radial-gradient(top, magenta 0, cyan 50%, yellow 100% )

  重复渐变

    background-image: -webkit-repeating-linear-gradient(top, red 0, green 50%, blue 100%)

list-style-type

  无序列表

    1.none   没有东西

    2.disc   实心圆

    3.circle  空心圆

    4.square  空心圆

  无序列表

    1.none  无标记

    2.decimal 数字

    3.lowe-roman  小写罗马数字

    4.upper-roman 大写罗马数字

    5.lower-alpha  小写英文

    6.upper-alpha  大写英文

  list-style-positon  li 表示的位置

    outside  默认在外侧

    inside   在内侧

  list-style-image   把图片的标识用图片代替

  综合用法

    list-style: type url position

display

  1.none  一个啥也没有的元素

  2.block  块级元素  独占一行   可以改变宽高

  3.inline  行内元素  不独占一行   不可以改变宽高

  4.inline-block  行内块元素  

Visibility  可见性

  1.visible 默认 元素可见

  2.hidden  元素不可见

  3.collapse  用在表格上可以删除一行或 一列 不影响表格的布局

opacity 不透明n  透明度

  取值   0-1

  低版本IE  filter:alpha(opacity = 30)  取值 0-100

  -moz-opacity: 0.1      取值 0-1

vertical-align  设置文字 参照图片的  对齐方式

  有用的几个取值

    top  文字将与 图片的顶部对齐

    middle  文字将与 图片中间对齐

    bottom  文字将与 图片的底端对齐

cursor   光标

  pointer  手状

  crosshair    十字线

  wait    等待状

  help   帮助状

  text   指文本

        

        

上一篇:JDBC连接SQL Server代码模板


下一篇:ASP.NET Core教程【二】从保存数据看Razor Page的特有属性与服务端验证