前端学习day16：背景渐变

1.伪类选择器:hover 

作用:设置鼠标悬停后的变化效果

伪类hover的书写方式：

基础用法：选择器(触发源):hover{触发后的效果}(改变自己)

进阶用法：选择器(触发源):hover 选择器(变换的元素){触发后的效果}

触发变化的样式有哪些:只要涉及到值改变的样式都能生效

 

2.轮廓属性:outline

outline: 10px solid blue;

给元素添加一个轮廓 , 不会撑大盒子大小

只支持矩形

 

3.阴影:box-shadow

box-shadow盒子阴影，让盒子四周产生阴影；

box-shadow:x y 模糊半径 扩散范围(阴影大小)

            x 阴影水平偏移量

            y 阴影垂直偏移量

            模糊半径 在边缘发生模糊的范围

            扩散范围(阴影大小) : 默认和盒子一样大

div{
    box-shadow:10px 5px 10px 5px red outset;
    /*
        第一个值：水平偏移（必需）
        第二个值：垂直偏移（必需）
        第三个值：模糊距离（可选，默认0）   从扩散边缘开始，向外逐渐模糊的距离
        第四个值：扩散距离（可选，默认0）   规定从何处开始模糊，默认0也就是盒子边，大于0则会看到阴影明显漏出，允许负值
        第五个值：隐藏颜色（可选，默认黑色）
        第六个值：阴影扩散方向（可选，默认outset向外扩展，可以改为inset向内扩展）
    */
}

 

4.圆角:border-radius

border-radius 圆角，让矩形盒模型拥有圆弧边缘；

取值通常使用百分比值或像素值；

圆角属性的写法

值最多可为4个：

四个值： 左上 右上 右下 左下

三个值：左上 右上左下 右下

两个值：左上右下 右上左下

一个值：四个角同一值

可以单独设置横轴半径和纵轴半径

写法  border-radius: 横轴半径/纵轴半径

两个值的写法也是支持多个值的,跟上面的写法一样

border-radius: 200px 100px/100px 50px;

左上角： 200px 100px

右上角：100px 100px

右下角：200px 50px

左下角：100px 50px

圆角可以分解为更细的分解属性，比如左上角：border-top-left-radius

 

(以下图片使用的盒子为width=200px,height=200px)

            /* 小水滴 */

           border-radius: 200px 200px 200px 50px;

           /* 木桶 */

           border-radius: 100px/200px;

           /* 树叶 */

           border-radius: 5px 100px;

           /* 四分之一个圆 */

           border-radius: 200px 0 0 0 ;

 

5.渐变色

在CSS3的渐变色属性出来之前这一效果只能借助设计师的图片来进行装饰，这样会平白给页面增加了一些http请求次数并增大了页面体积，最终导致延长页面的加载时间。而渐变色属性的出现则很大程度上解决了该问题。

①线性渐变: linear-gradient()

基础写法

/*百分比值也可以用确切的像素值代替*/
background: linear-gradient(red 0%, blue 100%);      linear [ˈlɪniə(r)] 线性的;gradient [ˈɡreɪdiənt] 梯度

background: linear-gradient(方向 ,color1 size,color2 size) ;

方向控制

渐变方向默认从上往下（to bottom），可以在写颜色值之前加上方向控制：

方向值可选参数 

1. 具体方向关键词  to top(从下到上)；to right(从左到右)

/*向下 默认*/
background: linear-gradient(to bottom, #fb3664 0%, #4af5db 100%);
/*
向上 to top
向右 to right
向左 to left
向右上角 to right top
向右下角 to right bottom
向左下角 to left bottom
向左上角 to left top
*/

2. 还可以使用角度值来指定方向（默认向下相当于180deg）

角度值 deg  60deg就是向60度方向渐变  turn 圈

backgorund: linear-gradient(45deg, #fb3664 0%, #4af5db 100%);

多颜色写法

渐变允许多种颜色过渡

background: linear-gradient(#fb3664 0%, #ff6600 30%, #4af5db 100%);

特殊简写

不写百分比位置值时，默认会平均分配：

background: linear-gradient(#fb3664, #ff6600, #4af5db);
/*等价于*/
background: linear-gradient(#fb3664 0%, #ff6600 50%, #4af5db 100%);

基础渐变: linear-gradient(color1,color2,color3)

进阶渐变: linear-gradient(方向值,color1 size,color2 size)

方向值的设置: 

1.具体的方向关键词 , to right(从左到右) | to bottom(默认值) | to left

2.角度值的设置 deg   45deg(45度方向渐变) turn(旋转几圈)

②径向渐变: radial-gradient()

径向渐变

background:radial-gradient(rgb(182, 68, 167) 0%,rgb(61, 139, 230) 100%)              radial [ˈreɪdiəl] 径向的

渐变色重复

repeating-linear-greadient 和 repeating-radial-gradient 可以让设置的背景色重复。

background: repeating-linear-gradient(45deg,red 0px,red 20px,blue 20px,blue 40px);

基础用法: radial-gradient(color1,color2,color3)

进阶用法: radial-gradient(圆的大小 at 圆心的位置,color1 size,color2 size,color3 size)

径向渐变的距离按照对角线的长度来设置 , 设置了圆的大小以后径向渐变的最后一个颜色会蔓延到整个容器

圆的大小 : 水平方向的半径 垂直方向的半径 (支持具体值和百分比的设置 )

圆心位置 : 支持关键词设置或者具体的值 默认是center

注意：渐变色本质上相当于背景图片，所以所有给背景图片的设置都适用于渐变色，如大小、位置、基点、多背景等等。

 

6.透明:opacity

opacity属性规定元素的透明度，取值 0（完全透明） ~ 1（完全不透明）；        opacity [əʊˈpæsəti] 不透明性