CSS基础篇之选择符3
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; }