text-shadow（文字阴影）
html： <p>文字阴影</p> css： p{ text-shadow:2px 3px 4px red: }
ps:前两个值是必须要滴，分别是水平阴影和垂直阴影的位置，允许负值；
第三个值是模糊的距离，最后一个不用说都知道是颜色。
元素样式
/*宽度*/ div { width:50px; } /*高度*/ div { width:50px; } /*外边距*/ div { width:300px; height:100px; margin:10px;/*需要设置宽高*/ } /*以上margin代表四周，如果需要单独控制某一边或者几边时就要加上相应属性：margin-top （设置上边的外边距） margin-bottom （设置下边的外边距） margin-left（设置左边的外边距） margin-right（设置右边的外边距） */ /*内边距*/ div { width:300px; height:100px; padding:10px;/*说明和外边距一样*/ } /*透明度*/ div { opacity: .3 ; /*取值范围为0-1，小数点之前的0可以省略*/ }
边框样式
/*边框*/ html： <div class="bk"></div> css： .bk{ width:100px; height:100px; border-top:5px solid red;/*上框线*/ border-bottom:2px dashed green;/*下框线*/ border-right:7px double cyan;/*右框线*/ border-left:10px dotted blue;/*左框线*/ }/*以上是缩写形式，第一个值为边框宽度，第二个值为边框线，第三个为边框线颜色。 如果不加top类的属性则代表的是四周都是 第二个值可取值的范围很多：hidden,dotted,dashed,solid,double,groove,ridge,inset,outset...每个值显示的样式各不同，我们记住一个常用的就是实线 solid */ /*ps:这样我们可以设置一个好玩的东东： html： <div class="demo"></div> css： .demo{ 0; height:0; border-top:100px solid transparent; border-bottom:100px solid transparent; border-left:100px solid #000; border-right:100px solid transparent } .demo:hover{ 0; height:0; border-top:100px solid orange; border-bottom:100px solid transparent; border-left:100px solid transparent; border-right:100px solid transparent; }*/ /*圆角效果*/ html： <div class="bk1"></div> css： .bk1{ width:100px; height:100px; background:red; border-radius:10px;/*所有角都使用半径为10px的圆角*/ /*border-radius: 5px 4px 3px 2px;四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ } /*盒子阴影*/ html： <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> css： div{ margin-top:10px; border:1px solid #000; } .bk1{ width:70px; height:100px; background:red; border-radius:50% 50% 50% 50%; } .box1{ width:100px; height:100px; background:green; } .box2{ width:100px; height:100px; background:green; box-shadow:5px 5px 10px red; } .box3{ width:100px; height:100px; background:green; box-shadow:10px 5px 20px red inset; } .box2:active{ box-shadow:10px 5px 20px red inset; } .box1:hover{ box-shadow:10px 5px 20px red inset; }/*box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; inset表示内阴影*/
段落样式
/*行高*/ html： <p>行高</p> css： p { line-height:25px; } /*段落缩进*/ html: <p>段落缩进</p> css: p { text-indent:2em；/*em单位名称为相对长度单位。相对于当前对象内文本的字体尺寸，国外使用比较多*/ } /*段落对齐*/ html: <p>段落对齐测试文字 段落对齐测试文字 段落对齐测试文字 段落对齐测试文字 段落对齐测试文字段落对齐测试文字 段落对齐测试文字 段落对齐测试文字段落对齐测试文字</p> css: p { text-align:right;/*取值有left（左对齐） right（右对齐）center（居中对齐） justify（两端对齐，常用于英文）*/ } /*文字间距*/ html： <p>文字间距测试文字</p> css： p { letter-spacing:5px; } /*文字溢出*/ html： <h1>这是一段演示用的文字</h1> css： h1{ width:300px; border:1px dashed red; white-space:nowrap;/*强制在同一行内显示所有文本*/ overflow:hidden;/*超出部分隐藏*/ text-overflow:ellipsis;/*超出部分显示“...” 当值为“clip”时效果为裁切*/ } /*段落换行*/ word-wrap：normal（允许内容顶开或溢出指定的容器边界。 ） | break-word（break-word 内容将在边界内换行。如果需要，单词内部允许断行。）
背景样式
html： <ul> <li>这是列表的第1行</li> <li>这是列表的第2行</li> <li>这是列表的第3行</li> <li>这是列表的第4行</li> <li>这是列表的第5行</li> <li>这是列表的第6行</li> <li>这是列表的第7行</li> <li>这是列表的第8行</li> <li>这是列表的第9行</li> </ul> css： ul{ width:1000px; height:1000px; background-color:red;/*背景颜色*/ } ul li{ text-indent:5em;/*缩进*/ background:url(../images/li_logo.png)no-repeat left 0px ;/*此为缩写形式，表示插入一张图片做背景图片，不平铺 左对齐方式 上对齐方式 最后两个值分别表示左对齐方式和上对齐方式，可以为百分比、像素等 */ }
PS：注意引入图片的路径！
还有就是注意输入法，以及css里面的分号！！！！！