css基础（一）－－边框

1.边框 圆角效果

border-radius:10px; /* 所有角都使用半径为10px的圆角 */ 

border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 

可以使用百分比或者em，但兼容性不太好

实现实心整个圆：

div.circle{

    height:100px;/*与width设置一致*/

    width:100px;

    border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/

    }

实心上半圆：

方法：把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的半径与元素的高度一致（大于也是可以的）。

div{

    height:50px;/*是width的一半*/

    width:100px;

    border-radius:50px 50px 0 0;/*半径至少设置为height的值*/

    }

2.css边框阴影

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 

insert可以写在参数的第一个或者最后一个，其他位置无效

.box_shadow{

  box-shadow:4px 2px 6px #333333; 

} 

.box_shadow{

  box-shadow:4px 2px 6px #333333 inset; 

} 

边框阴影（2）

阴影模糊半径和阴影扩展半径的区别

模糊半径：值值能为正数，如果是0，表示不具备模糊效果，如果值越大边缘就越模糊

扩展半径：可以为正值或者负值，如果是正数，阴影整个都扩大，如果是负数，阴影整个都所缩小

x轴偏移量和y轴偏移量都可以设置为负数，如果是负数：

.boxshadow-outset{

    width:100px;

    height:100px;

    box-shadow:-4px 4px 6px #666;

}

 

.boxshadow-outset{

    width:100px;

    height:100px;

    box-shadow:4px -4px 6px #666;

} 

css边框 为边框应用图片

即边框应用背景图片－－border-image 

repeat：

repeat的意思就是重复，目前因为是刚好被整除，效果看不出来。如果改下DIV的宽高，再来看重复的效果： 

边角部分为裁掉了，可见repeat就是一直重复，然后超出部分剪裁掉，而且是居中开始重复。

Round 参数：Round可以理解为圆满的铺满。为了实现圆满所以会压缩（或拉伸）； 

Stretch 很好理解就是拉伸，有多长拉多长。有多远“滚”多远。