CCS学习（三）

边框样式

 边框线 dorder-style （top 上； bottom 下；  left 左； right 右）  样式：none | hidden | dotted | dashed | solid | double | groove |ridge | inset  | outset 

 不显示上边框  例如：<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{
                                  width: 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;

    背景原点