CSS列表、表格、鼠标、滤镜样式设置

列表属性

    ul{
            list-style-type: circle;
            list-style-position: inside;
            list-style-image: url();
            
            //简写
            list-style: circle outside url();
        }

list-style: 列表标志 列表标志位置 列表项图像;
列表项样式重置：

        ul{
            list-style-type: none;;
        }

表格属性

1. 单元格之间的间隔：（设置相邻单元格之间的间隔）
   border-spacing：水平间隔 垂直间隔
2. 边框折叠：border-collapse：collapse | separate
3. 表格宽高
4. 文本对齐方式：text-align：center
5. 背景：background

         table{
            border-spacing: 20px 30px;
            /* width: 50px;
            height: 50px; */
         }

鼠标样式

    //一个简写
    (span{womeb$}+br)*4====
    <span>womeb1</span><br><span>womeb2</span><br><span>womeb3</span><br><span>womeb4</span><br>

cursor：pointer | wait | help | auto
主要应用场景

         #page{
            cursor: pointer;
         }

 <div id="page">点击跳转百度</div>
    <script type="text/javascript">
        document.getElementById("page").οnclick=function(){
            window.location="http://baidu.com"
        }
    </script>

此时当鼠标移至文字处，鼠标会变成pointer形状，指示用户可以执行跳转动作

滤镜属性

定义图形的可视效果

         img{
            filter: blur(2px);
            filter: saturate(100%);
         }

语法： filter：属性值

1. 高斯模糊：filter：blur（合法的尺寸单位）
   默认值为0，值越大，越模糊，不能设置为百分比
2. 饱和度设置：filter：saturate（百分比）
   默认值为100%，0%会变成白色图像，可以超过100%，有更高的饱和度
3. 灰度：filter：grayscale（30%）
   值0%-100%之间，默认值为0，当为100%时，图像变成黑白图像
4. 对比度：filter：contrast（0%）
   默认值为100%，图像无变化，当值为0时，图像变为全黑，当超过100%时，意味着有更低的对比度
5. 透明度：filter：opacity（100%）
   0% 完全透明 100%完全不透明
   值在0-100之间
   在老版本谷歌浏览器等需要加前缀，所有的ie浏览器都支持滤镜属性

样式的重置

        ul{
            list-style-type: none;;
        }