CSS3的边框（一）

CSS3的边框圆角、边框阴影属性，应用十分广泛，兼容性也相对较好，具有符合渐进增强原则的特征，我们需要重点掌握。主要包括边框圆角，边框图片，边框阴影。

一、边框圆角

圆角处理时，脑中要形成圆、圆心、长半径、短半径的概念，正圆是椭圆的一种特殊情况。

 

可分别设置长、短半径，以“/”进行分隔，遵循“1，2，3，4”规则，参考手册练习熟悉各种简写方式。

如设置一个圆形，设置div的样式为border-radius: 90px;

 border-radius可以同时设置1到4个值。（想想我们之前的margin与padding）如果设置1个值，表示4个圆角都使用这个值。如果设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。如果设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。

实现下图所示的半圆形，则需要设置样式height: 90px;

border-radius: 90px 90px 0 0;

 

表格运用圆角需要要 border-collapse: separate;

当圆角半径小于或等于边框宽度时，元素内角是直角