CSS3学习笔记（二）——边框

1、圆角效果   border-radius

body{
    border-radius:5px; /*所有圆角的半径均为10px*/
    border-radius:1px 2px 3px 4px;/*按顺时针：左上、右上、右下、左下*/
}

2、阴影   box-shadow

body{
    box-shadow:1px 2px 3px 4px red inset;
    /*x轴偏移量 y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式*/
}

注意：inset 可以写在参数的第一个或最后一个，其它位置是无效的 

小补充：

（1）阴影模糊半径和阴影扩展半径是什么鬼？区别是什么？

阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

（2）X轴偏移量和Y轴偏移量值可以设置为负数

3、为边框应用图片  border-image

body{
    background:url(csdn.jpg) 10px 20px no-repeat; /*宽度 长度*/
    border-image:url(borderimg.png) 70 repeat;
}

 repeat效果

round效果：

 

stretch效果：

笔记整理出自：https://www.imooc.com/learn/33