CSS知识总结（五）

CSS常用样式

3.边框样式

　　1）边框线

　　　　常用的边框线：dotted（点状）、dashed（虚线）、solid（实线）、double（双实线）

　　　　border-top-style　　　　设置上边框线

　　　　border-bottom-style　　设置下边框线

　　　　border-left-style　　　　设置左边框线

　　　　border-right-style　　　设置右边框线

　　　　例子：

/* CSS代码 */

.style{

    width:100px;

    height:100px;

    border-top-style:dotted;

    border-bottom-style:dashed;

    border-left-style:solid;

    border-right-style:double;

}

<!-- HTML代码 -->

<body>

    <div class="style"></div>

</body>

　　　　效果：

　　2）边框宽度

　　　　border-width : thin | medium | thick | length

　　　　thin（细边框）、medium（中等边框）、thick（粗边框）、length（数值px）

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

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

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

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

　　　　例子：

/* CSS代码 */

.width{

    width:100px;

    height:100px;

    border-style:solid;

    border-top-width:thin;

    border-bottom-width:medium;

    border-left-width:thick;

    border-right-width:10px;

}

<!-- HTML代码 -->

<body>

    <div class="width"></div>

</body>

　　　　效果：

　　3）边框颜色

　　　　border-color: color

　　　　color取值：英文单词、十六进制、RGB

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

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

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

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

　　　　例子：

/* CSS代码 */

.color{

    width:100px;

    height:100px;

    border-style:solid;

    border-color:5px;

    border-top-color:yellow;

    border-bottom-color:green;

    border-left-color:#f00000;

    border-right-color:rgb(0,0,0);

}

<!-- HTML代码 -->

<body>

    <div class="color"></div>

</body>

　　　　效果：

　　4）边框样式缩写

　　　　border : border-width border-style border-color

　　　　例子：

div {

    width:100px;

    height:100px;

    border-width:1px;

    border-style:solid;

    border-color:#FF0000;

}

　　　　缩写后：

div {

    width:100px;

    height:100px;

    border:1px solid #FF0000;

}

　　5）圆角效果

　　　　border-radius: length | percentage

　　　向元素添加圆角表框。有一下几种情况：

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

　　　　div{ border-radius:10px;}

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

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

　　　3、设置每个角的水平半径和垂直半径,用斜杠隔开

　　　　div{ border-radius:40px/20px; }

　　　4、圆形

　　　　div{ border-radius:50% }

　　6）边框图片

　　　　border-image

　　　　边框样式使用图像来填充

　　　　设置了border-image后，border-style则不显示

　　7）盒子阴影

　　　　box-shadow: none | shadow

　　　　box-shadow: 水平偏移量垂直偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

　　　　其中，水平和垂直的偏移量必写，其它各自展示不同的效果。

　　　　1、外阴影常规效果：

/* CSS代码 */

.outset{

    width:100px;

    height:100px;

    background:#000;

    box-shadow:5px 5px #ccc;

}

<!-- HTML代码 -->

<body>

    <div class="outset"></div>

</body>

　　　　2、外阴影模糊效果：

/* CSS代码 */

.outset-blur{

    width:100px;

    height:100px;

    background:#000;

    box-shadow:5px 5px 10px #000;

}

<!-- HTML代码 -->

<body>

    <div class="outset-blur"></div>

</body>

　　　　3、外阴影模糊外延效果：

/* CSS代码 */

.outset-extension{

    width:100px;

    height:100px;

    background:#000;

    box-shadow:5px 5px 10px 10px #f00;

}

<!-- HTML代码 -->

<body>

    <div class="outset-extension"></div>

</body>

　　　　4、内阴影常规效果：

/* CSS代码 */

.inset{

    width:100px;

    height:100px;

    background:#ccc;

    box-shadow:5px 5px #000 inset;

}

<!-- HTML代码 -->

<body>

    <div class="inset"></div>

</body>

　　　　5、内阴影模糊效果：

/* CSS代码 */

.inset-blur{

    width:100px;

    height:100px;

    background:#ccc;

    box-shadow:5px 5px 10px #000 inset;

}

<!-- HTML代码 -->

<body>

    <div class="inset-blur"></div>

</body>

　　*在下一篇博文中，会说到关于边框样式和盒子阴影应用到网页中的效果。