*css随笔4

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里面的分号！！！！！