HTML5+CSS3--学习笔记

学习css3第三天：
一.圆角：设置盒子边框圆角
提醒：设置的值为圆角的半径。
语法：border-radius：像素；
1.设置一个值:四个角的圆角都一样
border-radius: 30px;

2.设置两个值:第一个值控制左上/右下,第二个值控制右上/左下;
border-radius: 20px 30px;

3.设置三个值:第一个值控制左上,第二个值控制右上/左下,第三个值控制右下;
border-radius: 30px 40px 60px;

4.设置四个值:左上,右上,右下,左下;
border-radius: 50px 60px 70px 80px;

5.添加/是用来设置当前不同方向的半径值 水平x方向/垂直y方向;
border-radius: 50px/100px;

6.添加某个角点的圆角
border-top-left-radius: 100px 100px;

7.如果想设置四个角点的不同方向的不同圆角值;分别是水平方向的:左上,右上,右下,左下/垂直方向的:左上,右上,右下,左下;
border-radius: 100px 0px 0px 0px/10px 0px 0px 0px;

二.设置边框阴影
边框阴影的设置与文本阴影的设置相类似。
语法：
文本阴影：text-shadow:offsetX offsetY blur color
边框阴影：box-shadow:h v blur spread color inset
h:水平方向的偏移值
v:垂直方向的偏移值
blur:模糊–可选，默认0
spread:阴影的尺寸，扩展和收缩阴影的大小–可选 默认0
color:颜色–可选，默认黑色
inset:内阴影–可选,默认是外阴影

单层阴影设置;
div.item:nth-of-type(-n+4){
box-shadow: 3px 3px;
};
多层阴影设置：
div.item:last-of-type{
box-shadow: 3px 3px 10px 10px orange inset,-3px -3px 10px orange inset;
}；

三.线性渐变
语法：
background:linear-gradiend(方向,开始颜色 位置,颜色2 位置…)
添加渐变:渐变不是一个单一色,它产生的是图像,所以需要私用backgroud；
方向：
to top==>0deg
to right==>90deg
to bottom==>180deg --默认值
to left==>270deg

例子：
background: linear-gradient(to right,red 0%,red 50%,blue 50%,blue 100%)；

四.径向渐变
注意：径向渐变:产生也是图像
语法：backgroud:radial-gradient(形状 大小 坐标 颜色1,颜色2…);

1. 形状shape:
   circle:产生正方形的渐变色;
   ellipse:适配当前的形状,如果是正方形的容器,两者效果一样,如果宽高不一样,默认效果切换到ellips

2. at position:坐标,默认在正中心.可以赋值坐标(参照元素的左上角)
   坐标可以为具体像素如(circle farthest-side at 150px 80px,red,blue)；表示渐变的圆点在x轴的正180px与y方向正80像素的焦点，也可以赋值关键字(left center right top bottom)

3. 大小size:
   closest-side:最近边;closest-side:最近边;
   farthest-side:最远边;
   closest-corner:最近角;
   farthest-corner:最远角;
   默认是最远的角farthest-corner

例子：
background: radial-gradient(circle farthest-side at 150px 80px,red,blue);