CCS学习（三）

边框样式

 不显示上边框  例如：<style type="text/css">
                           div{border-top-style: none;}
                  </style>

边框宽 border-width （top 上； bottom 下； left 左； right 右）样式：medium | thin | thick | length

  上边框宽度   例如：<style type="text/css">
                         div{border-top-width: 100px;}
                   </style>

边框颜色 border-color （top 上； bottom 下； left 左； right 右）

  上边框为红色  例如：<style type="text/css">
                            div{widows: 100px; height: 100px; border-style: solid;  border-top-color: red;}
                   </style>

边框缩写 border:1px solid #FF0000; 1px为边距 solid为风格后面是颜色

圆角效果 border-radius 例如：{ border-radius：1px;}所有边角都以半径为1px的圆角， {border-radius: 1px 2px 3px 4px;}以顺时针方向设置， {border-radius：50%}圆

边框图片 border-image 样式：source， slice，width，outset，repeat 注意：在设置了border-image后则border-style不显示

盒子阴影（背景图片颜色阴影） box-shadow 设置的样式： box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色 rgba(0,0,0,.5)这里的.5是透明度 ] [投影方式 inset;] （字体阴影 text-shadow ）

段落样式

行高 line-height 可用单位：px % （内容到边框border的高度叫行高）

段落首行缩进 text-indent 可用单位：em （一般文章第一行的第一个字都会后退两格 2em）

段落对齐 text-align 样式：left right center justify自动调整不齐的地方

文字间距 letter-spacing 文字与文字的空隙

文字溢出 text-overflow 样式：cilp 把溢出框外的文字剪掉， elliptical 把溢出框外的文字改成.... （如要改成...必须强制定义文本【white-space:nowrap】和隐藏溢出【overflow-hidden】才会实现elliptical的效果）

                例如：<style type="text/css">
                          .p{
                                   100px;
                                  height: 30px;
                                  border:1px solid red;
                                  overflow:hidden;
                                  word-spacing: nowrap;
                                  text-overflow: ellipsis;
                            }
                           </style>

段落换行 word-wrap 样式：normal 允许内容顶开或溢出指定的容器边界， breap-word 内容将在边界内换行，如果需要，单词内部允许断行。

背景样式

定位 position: static:无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。

（定位用于让多个border重叠效果） relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。

absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。

fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。

背景颜色 background-color：颜色；还有一种　　rgba red 红色 green 绿色 blue 蓝色 a 代表的是透明度（a的取值范围为0-1）语法是：color：ragb（0,0,0,.1） border-color：rgba background-color:rgba

渐变色 background-image：linear-gradient( to top，red 10%，blue)

背景图片 background-image：none / URL（图片地址）

背景平铺方式 background-repeat：repeat默认多重图片 / no-repeat 一张图片/ repeat-X X轴多重图片 / repeat-Y Y轴多重图片

背景图片对齐方式 background-position：左右对齐上下对齐；还可以用 :% px;

背景原点