CSS3-背景篇

1. 文本阴影text-shadow

  1. text-shadow属性还没有出现时,大家在网页设计中阴影一般都是用photoshop做成图片
  2. 现在有了css3可以直接使用 text-shadow属性来指定阴影
  3. 这个属性可以有两个作用:产生阴影模糊主体
  4. 这样在不使用图片时能给文字增加质感
  5. 语法:
    text-shadow :x轴偏移 y轴偏移 模糊距离 阴影颜色;
    // (必须)x、y轴取正负值 如5px、-5px
    // (可选)模糊距离必须取正值如:5px
    // (可选)阴影颜色为色值,也可以是rgba透明色
    // 可以给一个对象应用一组或多组阴影效果,方式如前面的语法显示一样,用逗号隔开。
    

2. 盒子阴影box-shadow

  1. box-shadow 属性向边框添加一个或多个阴影

  2. 语法:

    box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外部阴影;
    
  3. 属性:

    1. h-shadow(必需):水平阴影位置。允许负值如:5px
    2. v-shadow(必需):垂直阴影位置。允许负值如:-5px
    3. blur(可选):模糊距离,必须取正值如:5px
    4. spread(可选):阴影尺寸,值越大阴影的扩散面积越大,默认值为0px
    5. color(可选):阴影颜色
    6. /外部阴影(可选):外部阴影outset(默认值)  内部阴影inset
    
  4. 注意:

    1. 一般跟文字阴影一样写四个值即可:水平 垂直 模糊 颜色
    2. 前面两个属性是必须写的,其余的可以省略
    3. 外阴影为默认的(outset)但是不能写, 想要 内阴影就写inset
    
  5. 案例:

    /*给盒子底部底部阴影*/
    box-shadow:0 10px 20px rgba(0,0,0,.1);
    

3. 颜色设置

  1. RGBA 说得简单一点就是在RGB的基础上加进了一个Alpha透明度
    语法:
    R:红色值。正整数 | 百分数
    G:绿色值。正整数 | 百分数
    B:蓝色值。正整数 | 百分数
    A:透明度。取值0~1之间

    /*比如红色*/
    background: rgba(255, 0, 0, 1);
    
  2. HSLA 色彩模式与HSL相同,只是在HSL模式上新增了Alpha透明度
    语法:
    H:Hue(色调,色相)。
           取值为:0 – 360,过渡为:(红橙黄绿青蓝紫红),0(或360)表示红色,120表示绿色,240表示蓝色,
           也可取其他数值来指定颜色。
    S:Saturation(饱和度)。
          取值为:0.0% - 100.0%
    L:Lightness(亮度)。
          取值为:0.0% - 100.0%,50%是平衡值
    A:Alpha透明度。
         取值0~1之间。

    /*比如红色*/
    background: hsla(360, 100%, 50%, 1);
    

4. 背景渐变

  1. 概述: 渐变CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性。

  2. 渐变可分为线性渐变、径向渐变

  3. -webkit-linear-gradient 前面加上浏览器私有前缀-webkit-,起始位置参数不用写to,方向与有to参数相反

  4. 线性渐变
    概述: linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果

     /*前缀添加在`linear-gradient前面*/
    background:linear-gradient(渐变色的起始位置,起始颜色,结束颜色 )
    /*也可以(渐变色起始位置,颜色、位置,颜色、位置,...)*/
    /* 例如:*/
    background:linear-gradient(to right, red 0%, green 30%, #008c8c 40%, pink 100%); 
    /*百分比表示位置度数*/
    
    参数说明:
    A. 第一个参数表示线性渐变的方向,
        a). to left:设置渐变为从右到左。相当于: 270deg;
        b). to right:设置渐变从左到右。相当于: 90deg;   
        c). to top:设置渐变从下到上。相当于: 0deg;
        d). to bottom:设置渐变从上到下。相当于: 180deg。这是默认值,等同于留空不写。
        f). 也可以直接指定度数,如45deg
    B. 第二个参数是起点颜色,可以指定颜色的位置
    C. 第三个参数是终点颜色,你还可以在后面添加更多的参数,表示多种颜色的渐变
    
  5. 径向渐变
    概述: radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果

    background: radial-gradient(形状, 大小, 坐标, 颜色)
    
    参数说明:
    A. 第一个参数shape:渐变的形状,ellipse表示适配元素大小(宽高不一样的情况下为椭圆形),circle表示圆形。
      默认为ellipse,如果元素形状为正方形的元素,则ellipse和circle显示一样
    B. 第二个参数size:渐变的大小,即渐变到哪里停止,它有四个值。 
      a). closest-side:最近边; 
      b). farthest-side:最远边;
      c). closest-corner:最近角; 
      d). farthest-corner:最远角。
      f). 默认是最远的角farthest-corner
    C. 第三个参数position:确定圆心的位置。默认为正中心。如果提供2个参数,第一个表示横坐标,第二个表示纵坐标;
      如果只提供一个,第二值默认为50%,即center
      取值:可以赋值坐标,参照元素左上角坐标点如:at 10px 10px
            也可以为关键字:left right top bottom center 记得前面加一个at 
    D. 第四个参数color:指定颜色,可以写多个也可以加上位置如:red 10%,bule 40%...
    F. 前三个参数为可选项
    
  6. 重复渐变
    用径向渐变做:

    background:repeating-radial-gradient(形状 大小 坐标,开始颜色 开始位置0%,结束颜色 结束位置	10%,....)
    /*颜色可以写多组*/
    

5. 背景图

  1. 设置背景图

    background-image:url("imgs/bg-1.jpg")
    
  2. 设置背景平铺

    background-repeat
    a). 默认情况下,背景图会铺满整个页面,背景图大小不够铺满整个页面时,背景图会在横坐标和纵坐标中进行重复;
    b). background-repeat:repeat 默认值,横、纵坐标重复
    c). background-repeat:round  会将图片缩放之后再平铺,达到铺满整个容器的效果
    d). background-repeat:space  图片不会缩放平铺,只会在图片之间产生相同的间距值,达到铺满整个容器的效果
    d). background-repeat:no-repeat(不重复)
    e). background-repeat:repeat-x(只在x轴重复)、y(也一样)**
    
  3. 设置滚动容器的背景的行为(是否固定)

    background-attachment
    A. 跟随元素滚动:background-attachment:scroll;
    B. 固定不动:background-attachment:fixed;
    C. 跟随内容滚动:background-attachment:local;
    
  4. 设置背景图的尺寸

    background-size
    a). background-size:contain 图片要完整的显示在指定的区域,不能改变图片的比例
    b). background-size:cover 图片撑满整个指定区域,而且比例不变,可能会溢出
    c). background-size:100% 横向撑满,纵向按比例缩放。百分比相对于盒子
    d). background-size:100% 100% 横、纵向撑满,图片比例可能会发生变化。
    f). background-size:x y 可以设置数值代表横、纵向的像素尺寸。
    
  5. 设置背景图位置

    background-position
    a). background-position:center 背景图横、纵向居中
    b). background-position:center top 横向居中,纵向靠上
    c). background-position:center bottom 横向居中,纵向靠下
    d). background-position:left center 横向靠左,纵向居中
    e). 预设值: left、bottom、right、top、center(居中)
    f). 也可以用数值或百分比如background-position:10px 10px 表示横、纵坐标离左边、上边边框的距离;
    
  6. 设置背景图坐标的原点

    background-origin
    a). background-origin:border-box 从边框开始填充背景,会与边框重叠
    b). background-origin:padding-box 从填充区开始填充背景,覆盖填充盒(为默认值)
    c). background-origin:content-box 从内容区域开始填充
    
  7. 设置内容的裁切,控制显示

    background-clip
    a). background-clip:border-box 显示border及以内的内容
    b). background-clip:padding-box 显示padding及以内的内容
    c). background-clip:content-box 只显示内容区
    
  8. 速写(简写)background

    A. background:url("imgs/main.jpg") no-repeat 50% 50%/100% fixed #000 顺序为设置图片、不重复、
       位置、尺寸、视口、背景颜色,因为位置和尺寸都有可能为百分比,所有浏览器规定尺寸必须写在位置后面中
       间加/隔开。有些属性可以不写,不写会按默认值处理
    B. background:背景颜色、背景图片地址、背景平铺、背景固定、背景位置、背景图片尺寸
    
  9. 有含义的背景图,需要在元素里添加文字

    1. 在网速不好的时候,加载不出来CSS属性的时候,会显示文字;
    2. 在网速正常的时候,能加载CSS属性,则显示图片;
    3. 所以书写代码的时候需要添加文字,然后隐藏文字;
    4. 方法一.文本缩进:text-indent:px,文本不换行:white-space:nowrap;把文本挤出到盒子外面, 
    然后隐藏溢出:overflow:hidden;
    5. 方法二.背景可以覆盖内边距,高度设置为0,padding-top内边距设置为原先高的值,这样背景图正常显示,
    文本就在盒子外面,然后隐藏溢出:overflow:hidden;
    6. 方法三,把文本用span元素包裹起来,然后隐藏span盒子。
    

6. 边框图片

  1. 设置边框图片路径
    border-image-source:url("./images/a.jpg");
    /*可以指定边框图片的路径,默认只是填充到容器的四个角*/
    
  2. 设置四个方向上的裁切距离
    border-image-slice:27 fill;
    /*第一个参数为数值是四个方向的裁切距离
     第二个参数fill是做内容的内部填充*/
    
  3. 设置边框图片的宽度
    border-image-width:27px;
    /*建议:一般设置为边框的宽度
     注意:边框图片的本质是背景,并不会影响元素内容的放置
    内容只会被容器的border和padding影响*/       
    
  4. 设置边框图片的平铺
    border-image-repeat:
    /*取值:repeat 直接重复平铺
          round 将内容缩放进行完整的重复平铺
          stretch 拉伸,默认值*/
    
  5. 缩写(简写)
    border-image: 图片链接 裁切距离 / 图片宽度 / 设置平铺
    
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页