购物网站建设与开发软件开发网站

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颜色值