border（边框）
如何用CSS调出边框
我们给p标签加一个边框试一下
p{
border：1px solid #ccc；/*这是缩写*/
}
第一个值是为边框的宽度
第二个值是为边框线样式为直线
第三个值是为边框的颜色
border-width（边框的宽度）
如果不调宽度的话默认边框是从左边到最右边。设置之后可以调节宽度。
border-top-width：；上
border-bottom-width：；下
border-left-width：；左
border-right-width：；右
border-style（边框线样式）
单个边框线调节样式
border-top-style：；（设置上边框）
border-bottom-style：；（设置下边框）
border-left-style：；（设置左边框）
border-right-style：；（设置右边框）
缩写div{ width300px；height100px；border-style:solie;}
宽度 高度 边框样式
其他边框样式值
none：无轮廓。border-color将被忽略，border-width计算值为0，除非边框轮廓为图像，即border-image。
hidden：隐藏边框。IE7及以下尚不支持
dotted：点状轮廓。IE6下显示为dashed效果
dashed：虚线轮廓。
solid：实线轮廓
double：双线轮廓。两条单线与其间隔的和等于指定的border-width值
groove：3D凹槽轮廓。
ridge：3D凸槽轮廓。
inset：3D凹边轮廓。
outset：3D凸边轮廓。
border-color（边框颜色）
还可以设置单个边的颜色
border-top-color：；上
border-right-color：；右
border-bottom-color：；下
border-left-color：；左
利用边框做出三角箭头
div{
width: 0;
height: 0;
border-top: 100px solid green;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
圆角效果
所有角的半径为10px圆角矩形。
div{
width: 300px;
height: 300px;
background-color: black;
margin: 10px;
border-radius: 15px;/*上右左下*/
}
四个角的半径分别为左上角顺时针到左下角的半径的。
div{
width: 300px;
height: 300px;
background-color: red;
margin: 10px;
border-radius: 10px 15px 20px 30px;
}
分别设置每个角的垂直半径和水平半径,用斜杠隔开，第一个参数表示左上角开始顺时针的水平半径，第二个参数表示左上角开始顺时针的垂直半径。
div {
width: 300px;
height:300px;
background-color: green;
margin: 10px;
border-radius:40px 30px 20px 10
px/5px 10px 15px 20px;
}
画圆
div{
border-radius:50%
}
竖着的半圆
div{
height: 300px;
background-color: yellow;
width: 150px;
border-radius: 150px 0 0 150px;/*宽是高的一半*/
margin: 10px;
}
横着的半圆
div{
width: 300px;
background-color: yellowgreen;
height: 150px;
border-radius: 150px 150px 0 0;/*高是宽的一半*/
}
盒子阴影
书写格式：box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
外阴影常规效果
div{
width:100px;
height:100px;
background-color:#cccccc;
box-shadow: 5px 5px 20px #000000;
}
外阴影模糊外延效果
div{
width:100px;
height:100px;
background-color:#cccccc;
box-shadow:5px 5px 5px 20px #000000 ;
}
内阴影效果
div{
width:100px;
height:100px;
background-color:#cccccc inset;
}
双内阴影效果
div{
width:100px;
height:100px;
background-color:#cccccc;
box-shadow:5px 5px 20px 2px #000000 inset，-2px -2px 5px 1px #ccc inset；
}
段落样式
行高（line-height)
p{
Width:300px;
Height:500px;
Line-height:150px；
}
行高是指内容的宽度到文字顶部之间的距离就是行高。
段落缩进
P{
Text-indent：em；
}
从左往右缩进了一个字符的间隔。数量不要太多。
段落对齐
Text-align：left | right | center | justify；
P{
Text-align:left;
}
文字间距
Letting-spacing：间距长度；
P{
Letting-spacing:10px;
}
每个字都会有间距间距距离取决于你的间距长度大小
文字溢出
Text-overtlow：clip | ellipsis
Clip的表现出来的效果是文字溢出的部分才会隐藏
Ellipsis的表现出来的效果是文字溢出的部分全部以...表示
如何用ELlipsis如何实现文字溢出时产生省略号的效果需要用到whtie-space:nowrap;（不换行）
Overflow:hidden;（隐藏溢出的部分）
Div{
width: 140px;
border: 1px solid #000;
white-space: nowrap;/*不换行*/
overflow: hidden;/*隐藏溢出于边框部分*/
text-overflow: ellipsis/clip;
}
我这里加了一个边框让你们看的更清楚。
背景样式
背景颜色
Background-color：transparent | color；（透明和颜色）
div{
Bakcground-color:#cccccc;
}
Div{
Background-color:transparent;
}
背景图片
Background-image：none | url
注意这个图片插入要写url。
Background-image：none | url
P{
Background-image：url（./图片名）；
}
背景平铺方式
Background-repeat：repeat | no-repeat | repeat-x| repeat-y
repeat：平铺
P{
Background-repeat：on-repeat；
}
背景定位
Background-position：左对齐方式 上对齐方式
No-repeat：不平铺
X-repeat：从X轴开始平铺
Y-repeat：从Y轴开始平铺
P{
Background-color：right bottom；
}