公输的前端学习记录day13-2（css）

        一：圆角边框

（css3新发布的功能）

border-radius属性，设置元素的外边框圆角。

1。语法：

border-radius：10px；

参数可以是px也可以是百分比，百分比就是宽度和高度的百分比。

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

圆角矩形（两边都是半圆的）设置成高度的一半。

也可以跟四个值，分别代表左上，右上，右下，左下，（顺时针一圈）

跟两个值是对角线关系。（先主后副）

分开写：如

border-top-left-radius

    二：盒子阴影（重点）

（css3新增）box-shadow属性为盒子添加阴影。

语法：

box-shadow:h-shadow v-shadow blur spread color inset; 

h-shadow必需，水平阴影位置，允许负值（负值往左走）

v-shadow必需，垂直。。。

blur可选，模糊距离（虚实）

spread可选，阴影尺寸

color可选 

inset可选，将外部阴影改为内部阴影

一般用半透明颜色rgba

注：（1）默认外阴影，不允许写outset

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

原先盒子没有影子，当鼠标经过盒子才出现影子。

任何盒子都可以加:hover 

三：文字阴影（了解）

text-shadow: h-shadow v-shadow blur color；和盒子阴影类似。