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>

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

转载于:https://www.cnblogs.com/mossbaoo/p/5764464.html