8.11 CSS知识点4

边框样式

1.边框宽度

border-width：medium | thin | thick | length

border-top-width  设置上边框宽度

border-bottom-width  设置下边框宽度

border-left-width  设置左边框宽度

border-right-width  设置右边框宽度

例：

div{
    width：300px;
    height:100px;
    border-style:solid;
    border-width:1px;
}

2.边框颜色

border-color：color

border-top-color  设置上边框颜色

border-bottom-color  设置下边框颜色

border-left-color  设置左边框颜色

border-right-color  设置右边框颜色

例：

div{
    width:300px;
    height:100px;
    border-style:solid;
    border-width:1px;
    border-color:#ff0000;
}

3.边框线

border-style：none | hidden | dotted | dashed | solid | double | groove | ridge | inset  | outset

border-top-style     设置上边框线

border-bottom-style     设置下边框线

border-left-style     设置左边框线

border-right-style     设置右边框线

例：

div { width:300px; height:100px; border-style:solid; ｝

4.边框样式缩写

border：border-width | border-style | border-color

例：

div {
    width:300px;
    height:100px;
    border-style:solid;
    border-width:1px;
    border-color:#FF0000;
}

缩写后：

div {
    width:300px;
    height:100px;
    border:1px solid #FF0000;
}

5.圆角效果

border-radius：[<length>|<percentage>]{1,4}[/[<length>|<percentage>]{1,4}]

例：

所有角都使用半径为10px的圆角

div{ border-radius:10px;} 

四个半径值分别是左上角、右上角、右下角和左下角，顺时针

div{ border-radius: 5px 4px 3px 2px; }

也可以分别设置每个角的垂直半径和水平半径,用斜杠隔开，第一个参数表示左上角开始顺时针的水平半径，第二个参数表示左上角开始顺时针的垂直半径

div{ border-radius: 10px 20px 30px 40px  /  5px 10px 15px 20px; }

圆

div{ border-radius:50% }

6.边框图片

边框样式使用图片来填充

border-image：<'border-image-source'> | <'border-image-slice'> [/<'border-image-width'>|/<'border-image-width'>/<'border-image-outset'>] | <' border-image-repeat'>

注意：

border-image-slice ：是一个数值或百分比，不需要带单位（特指px）设置了border-image之后，border-style则不显示

例：

.test { border: 10px solid gray; border-image: url(test.png) 10/10px; }

7.盒子阴影

box-shadow是向盒子添加阴影，支持添加一个或多个

使用方法：

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径]  [阴影颜色] [投影方式];

例：

外阴影常规效果

.outset { box-shadow: 5px 5px rgba(0, 0, 0, .6); }  

外阴影模糊外延效果

.outset-blur{ box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6); }

内阴影效果

. inset { box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset; }

段落样式

1.行高

控制段落内每行高度

line-height：normal | length

例：

p { line-height:25px;}
p { line-height:150%}

2.段落缩进

控制段落的首行缩进

text-indent：length

例：

p { text-indent:2em;}

3.段落对齐

控制段落对齐方式，不但是文本，对象中的其它inline或inline-block元素也能够被text-align进行对齐方式的设置。

text-align：left | right | center | justify

例：

p { text-align:right;}
p { text-align:center;}

4.文字间距

控制段落的文字间的距离

letter-spacing：normal | length

例：

p { letter-spacing:5px;}

5.文字溢出

控制文字内容溢出部分的样式

text-overflow：clip | ellipsis

值	描述
clip	当内联内容溢出块容器时，将溢出部分裁切掉
ellipsis	当内联内容溢出块容器时，将溢出部分替换为（...）

注意：

text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。

例：

div.input{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

6.段落换行

控制内容超过容器的边界时是否断行

word-wrap：normal | break-word

值	描述
normal	允许内容顶开或溢出指定的容器边界
break-word	内容将在边界内换行，如果需要，单词内部允许断行

例：

p {word-wrap: break-word;}

背景样式

1.背景颜色

background-color : transparent | color

例：

body { background-color:#ccc;}
h1 { background-color:#ededed;}

2.RGBA

RGB是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的
颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。

color：rgba(R,G,B,A)以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的
取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览
器都支持使用百分数值。A为透明度参数，取值在0~1之间，不可为负值。

例：

border-color:rgba(255 , 0 , 0 , .7);
background-color:rgba( 100 , 120 , 60 , .5 );
border-color:rgba(255 , 0 , 0 , .7);

3.渐变色彩

CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同，这里我们只针对线性渐变的 W3C 标准语法来分析其用法，其余大家可以查阅相关资料。W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。

角度	英文	作用
0deg	to top	从下向上
90deg	to right	从左向右
180deg	to bottom	从上向下
270deg	to left	从右向左
	to top left	右下角到左上角
	to top right	左下角到与右上角

例：

background-image:linear-gradient(to left, red 30%,blue);

4.背景图片

background-image:none | url( url )

例：

body { background-image:url(images/bg.gif);}

5.背景平铺方式

background-repeat : repeat | no-repeat | repeat-x | repeat-y

例：

body { background-repeat:repeat-x;}    

6.背景定位

background-position : 左对齐方式  上对齐方式

例：

body { background-position:left bottom;}
body { background-position:30% 20px;}