CSS3新增样式

1，圆角边框

在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了

border-radious属性用于设置元素的外边框圆角

语法：

border-radious：length；

radious 半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果

注意：

????????参数值可以为数值或者百分比的形式

????????如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%

? ? ? ? 如果是个矩形，想要设置为一个圆角矩形，把数值修改为高度的一半就可以做

? ? ? ? 该属性是一个简写属性，可以设置不同的圆角

????????定义四个值，分别代表左上角，右上角，右下角，左下角（顺时针）

? ? ? ??定义两个值，代表左上角 、右下角和右上角、左下角（呈对角线型）

? ? ? ? 分开写：border-top-left-radious、border-top-right-radious、border-bottom-left-radious、border-bottom-right-radious

2，盒子阴影

?CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影

语法：

box-shaow：h-shaow? v-shaow? blur? spread? color? inset；

值? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?描述

h-shaow? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?必需，水平阴影的位置，允许负值

v-shaow? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?必需，垂直阴影的位置，允许负值

blur? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?可选，模糊距离（影子模糊程度）

spread? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 可选，阴影的尺寸（阴影的大小）

color? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?可选，阴影的颜色，请参阅CSS颜色值

inset? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?可选，将外部阴影（outset）改为内部阴影

box-shaow:10px 10px 10px 10px rgba(0,0,0,.3);

注意：

1，默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效

2，盒子阴影不占用空间，不会影响其他盒子排列

3，文字阴影

?在CSS3中，我们可以使用text-shadow属性将阴影应用于文本

语法：

text-shadow：h-shadow? v-shadow? blur? color；

值? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 描述

h-shadow? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?必需，水平阴影的位置，允许负值

v-shadow? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?必需，垂直阴影的位置，允许负值

blur? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?可选，模糊的距离

color? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?可选，阴影的颜色，参阅CSS颜色值

?

?

?