CSS3初学篇章_4（边框样式/段落样式）

边框样式

hidden：隐藏边框。IE7及以下尚不支持
dotted：点状轮廓。IE6下显示为dashed效果
dashed：虚线轮廓。
solid：实线轮廓
double：双线轮廓。两条单线与其间隔的和等于指定的border-width值
groove： 3D凹槽轮廓。
ridge： 3D凸槽轮廓。
inset： 3D凹边轮廓。
outset： 3D凸边轮廓。

border-top-style 设置上边框线

border-bottom-style 设置下边框线

border-left-style 设置左边框线

border-right-style 设置右边框线

div {

width:300px;

height:100px;

border-style:solid;

｝

2.边框宽度

语法：border-width : medium | thin | thick | length

medium：定义默认厚度的边框。计算值为3px
thin：定义比默认厚度细的边框。计算值为1px
thick：定义比默认厚度粗的边框。计算值为5px

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

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

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

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

div {

width:300px;

height:100px;

border-style:solid;

border-width:1px;

｝

3.边框颜色

语法：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;

}

4.边框样式缩写

语法：border : border-width || border-style || border-color

div {

width:300px;

height:100px;

border:1px solid #FF0000;

}

5.圆角效果
语法：border-radius : [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
说明：设置或检索对象使用圆角边框。提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数

/*圆*/

div{ border-radius:50% }

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

div{ border-radius:10px;}  

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

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

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

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

6.边框图片
语法：border-image：<' border-image-source '> || <' border-image-slice '> [ / <' border-image-width '> | / <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat '>

<' border-image-source '>：设置或检索对象的边框是否用图像定义样式或图像来源路径。
<' border-image-slice '>：设置或检索对象的边框背景图的分割方式。
<' 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：none | <shadow> [ , <shadow> ]*

<shadow> = inset? && <length>{2,4} && <color>?

inset：设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影
<length>：第1个长度值用来设置对象的阴影水平偏移值。可以为负值
　　　　　　第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
　　　　　　如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
　　　　　　如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
<color>：设置对象的阴影的颜色。

/*外阴影模糊外延效果*/

.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.段落对齐
语法：text-align : left | right | center | justify
说明：控制段落对齐方式，不但是文本，对象中的其它inline或inline-block元素也能够被text-align进行对齐方式的设置。

justify ：内容两端对齐。

p { text-align:right;}

4.文字间距
语法：letter-spacing : normal | length
说明：控制段落的文字间的距离

p { letter-spacing:5px;}

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

div,input{

    overflow: hidden;    /*条件1：超出部分隐藏*/

    white-space: nowrap;/*条件2：强制在同一行内显示所有文本*/

    text-overflow: ellipsis;/*超出部分显示。。。*/

}

6.段落换行
语法：word-wrap：normal | break-word
说明：控制内容超过容器的边界时是否断行

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

秒客网

CSS3初学篇章_4（边框样式/段落样式）

相关文章