CSS3边框

CSS3圆角边框

语法：border-radius:长度值;
说明：长度值可以是px、百分比、em等。

border-radius属性值的4种写法
- 1、border-radius设置1个值
  当border-radius设置1个值时，例如“border-radius:10px;”表示4个角的圆角半径都是10px
- 2、border-radius设置2个值
  当border-radius设置2个值时，例如“border-radius:10px 20px;”表示左上角和右下角的圆角半径是10px，右上角和左下角的圆角半径都是20px
- 3、border-radius设置3个值
  当border-radius设置3个值时，例如“border-radius:10px 20px 30px;”表示左上角圆角半径是10px，左下角和右上角圆角半径都是20px，右下角圆角半径是30px
- 4、border-radius设置4个值
  当border-radius设置4个值时，例如“border-radius:10px 20px 30px 40px;”表示左上角、右上角、右下角和左下角的圆角半径依次是10px、20px、30px、40px
border-radius画实心半圆和实心圆
- 1、实心半圆
  假如我们要制作实现上半圆，实现方法：把高度height设为宽度width的一半，并且只设置左上角和右上角的圆角半径与元素的高度一致，而右下角和左下角的圆角半径设置为0




    
    Document

浏览器效果

2、实心圆
在CSS3中，使用border-radius属性实现实心圆方法：把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半




    
    Document

浏览器效果

语法简写

border-image属性

说明：从上面语法分析图，我们可以看出，使用border-image属性设置边框背景图片需要设置3种参数：
（1）图片路径；
（2）切割图片的宽度（4条边的宽度，依次为上边、右边、下边、左边，按照顺时针方向，类似于border属性的4条边顺序）；
（3）图片平铺方式；
使用border-image属性为边框添加背景时候，如果想要达到预期效果，我们需要注意以下2点：
（1）边框的背景在制作时候，应该制作4条边，中间部分需要挖空；
（2）边框背景图片的每条边宽度跟对应的边框宽度（border-wdith）应该相同；
边框背景图片延伸方式
- 重复repeat；4条边的小方块会不断重复，超出元素宽度或高度的部分将会被剪切掉。
- 铺满round；可以理解为圆满地铺满，为了实现圆满，边框图片会压缩或拉伸。
  分析：repeat会把超出宽度和高度的部分剪切掉，而round却是拉伸或压缩边框部分以实现“圆满”地平铺。
- 拉伸stretch；指的是对边框部分进行拉伸（不重复），有多长拉多长。

语法：box-shadow：x-shadow  y-shadow  blur  spread  color  inset;

语法：box-shadow: 左边阴影,顶部阴影,底部阴影,右边阴影;