10.22css基础03

列表样式,可以给ul或者单独给li标签

        /* 控制列表项的标记类型 值可以是无序列表的 值，有序列表的值。*/

  list-style-type:circle; 

        /* list-style-image 指定图片作为符号类型 */ /* list-style-image: url(./imgs/icon1. png); */

        /* 符号的位置, inside 符号和内容在一行， outside，符号在内容外面 */ /* list-style-position: outside; */

        /* 可以把算个属性值简写到list-style属性里面, 需要的就写，不需要的就省略*/

  list-style: url(./imgs/icon1.png) square inside;

边框

边框border，元素边框的样式，一般用边框简写 border，常用的border-style是solid实线， dotted 短虚线，dashed长虚线

        /* 元素四边的边框，1px是边框的宽度是1px， solid线条类型是实线，线条的颜色是红色 */   border: 1px solid red; 

/* 上边框的宽度，边框类型，边框颜色 */  

  border-top:1px dashed red;

/* 有边框 */

  border-right:1px solid blue;

/* 下边框 */

  border-bottom:1px solid gray;

左边框 border-left: 5px dashed green;

轮廓 outline

/* 轮廓(外边框),只能指定四条外边框，不能单独 设置，外边框的宽度，线条类型，线条颜色 */   outline: 2px solid black;

/* 外边框离元素边框的偏移量，默认是紧挨着 border */

  outline-offset: 15px;

倒角border-radius(css3新增),可以把元素的叫变成圆角

元素的四个角的半径为30px开始画弧度(倒角弧度)

        一个值代表四个角的弧度半径一致。

  border-radius: 30px;

        2个值中(对角)，第一个值代表左上角，右下 角。第二个值代表右上角，左下角

  border-radius: 30px 15px;

        4个值代表左上角，右上角，右下角，左下角

  border-radius: 10px 20px 30px 40px;

        圆形: 一个正方形的倒角设置为50%

  border-radius: 50%;

---

表格

  .table1 {

        /* 表格的边框 */

        border: 1px solid gray;

        width: 500px;

        height: 500px;

        /* 边框重合的地方折叠 */

        border-collapse: collapse;

  }

  /* 设置td元素的边框 */

.table1 td {

        border: 1px solid blue;

        /* 单元格元素的水平对齐方式 left居左， center居中，right居右 */

        text-align: center;

        /* 单元格的垂直对齐方式 top顶部对齐， middle居中，bottom底部对齐 */

        vertical-align: top;

}

     /* 给tablet添加背景颜色，给td设置一个背景 色，用cellspacing单元格间距实现线条线条效果 */

.table2 {

        width: 500px;

        height: 500px;

        background-color: aqua;

}

.table2 td{

        background-color: #fff;

}

     <table class="table2" cellspacing="1">