学习CSS3的第二天

学习CSS3的第二天

第二天了第二天了，别睡了别睡了！起来学习啦！大家一起学习起来，学习使我快乐！

继第一天的学习，我们打下了CSS3夯实的基础，现在我们要继续拓展CSS3中新增的还有哪些样式吼！出发够够够！
一、背景渐变——background-image
进过之前的学习大家应该知道background-image可以引入背景图片哈（不知道的集美or铁汁记得康康前面的文章哟，跟上大家的步伐），那么现在我要介绍它的新增样式渐变。
1、linear-gradient（① ， ②） 线性渐变
① angle 变化的角度 可以写to top/bottom/left/right 从下至上/从上至下/从右至左/从左至右
也可以写deg 角度 如：90deg、180deg
② color 变化的颜色 颜色+空格+所占比例 单位可以写%、px。（若不写比列，则渐变的颜色平均分配）
具体演示代码如下：

.div1 {
    width: 100px;
    height: 100px;
    background-image:linear-gradient( to top,white ,black);
}

页面显示效果：

.div1 {
    width: 100px;
    height: 100px;
    background-image:linear-gradient( 60deg,white ,black);
}

2、radial-gradient（① at ②，③） 径向渐变
①径向渐变的半径
②圆心的坐标位置
③颜色
具体演示代码如下：

.div1 {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    background-image:radial-gradient(50px at center,black,white);
}

页面显示效果：

二、文字阴影——text-shadow
text-shadow：① ② ③ ④；
①阴影水平距离 单位px；
②阴影垂直距离 单位px；
③模糊距离 单位px；
④颜色
具体演示代码如下：

.div1 {
    width: 800px;
    height: 200px;
    font-size: 50px;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 10px red;
}

页面显示效果：

OK！学到这里，大家有没有觉得眼熟？对了！没错，就是box-shadow。是挺相似的吼，但是大家得注意，这文字阴影没有阴影尺寸也没有内阴影！要记清楚哦！ok，继续。
文字阴影text-shadow可以这设置的效果：
悬浮效果：
具体演示代码如下：

.div1 {
    width: 800px;
    height: 200px;
    font-size: 50px;
    font-weight: bold;
    color: cornflowerblue;
    text-shadow: 3px 3px black,-3px -3px white;
}

页面显示效果：

三、文字描边——text-stroke （要注意加上浏览器的前缀，有的可能不支持）
text-stroke：① ② ；
① 描边粗细
② 颜色
具体演示代码如下：

.div1 {
    width: 800px;
    height: 200px;
    font-size: 50px;
    font-weight: bold;
    color: white;
    -webkit-text-stroke:2px black ;
}

页面显示效果：

今天的学习就到这里啦，没有很难的地方哈，就是一定要自己动手动手！
（写这篇文章正好是冬至日，祝大家冬至快乐记得吃饺子！吃完饺子之后还是要好好敲代码，争取明年吃更好馅的饺子哟！）overover！