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>

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

posted @ 2016-08-12 13:50 mossbaoo 阅读(440) 评论(0) 编辑收藏举报

刷新页面返回顶部

mossbaoo

CSS知识总结（五）

CSS常用样式

3.边框样式

公告