背景图定位，css3背景，css3颜色，css文本，线性渐变，径向渐变

背景图定位

• backbround-position:(属性值)

• 定义：规定插入背景图在盒子中的位置，默认为从左上角开始显示。

• 定位方法：
  1、像素：backbround-position:（水平偏移，垂直偏移）
  X轴 正值向右偏移，负值向左偏移
  Y轴 正值向下偏移，负值向上偏移
  2、百分比：
  图片在盒子的左上角 backbround-position:（0%，0%）
  在右下角backbround-position:（100%， 100%）

• 百分比代表的像素值：（盒子的宽/高 — 图片本身的宽/高）%
  如果只有一个值，默认另一个值为50% 值也可以是负数。
  3、单词表现方式：
  top 顶部
  bottom 底部
  center 中间
  left 左边
  right 右边
  应用场景：
  1、网页背景
  2、广告通栏
  3、精灵图 （永它可以提高网页的反应速度，减少服务器压力）

滚动

• backbround-attachment
• 定义：设置图片是否随着页面的滚动儿滚动。
• 属性值：
• fixed 背景图会被固定，不会随着网页滚动而滚动。
• scroll 设置背景图像会随视窗滚动条的移动而移动

css3的背景

• 背景原点：backbround-origin:
• padding-box 从内边距开始显示背景
• border-box 从边框开始显示背景
• content-box 从内容开始显示背景

背景裁切

• background-clip
• padding-box 超出内边距的背景图被裁切掉
• border-box 超出边框的背景图被裁掉
• content-box 超出内容部分的背景图被裁切掉

CSS3的颜色

• 用rgba来表示： a代表的是透明度
  

CSS文本

• text-shadow 文本阴影
• text-shadow 文本阴影。
  格式：
  text-shadow: 水平偏移量 垂直偏移量 模糊度 阴影颜色;
  
• 火焰字体

p{
    
    
            font-size: 60px;
            color: red;
            text-shadow: 0 0 4px #fff,0 -5px 4px #ff3,2px -10px 6px #fd3,-2px -15px 11px #f80,
            2px -25px 18px #f20;
        }

盒子属性

• 盒子：

• 边框圆角

           border-radius
               属性值：px 百分比
               border-radius：水平半径 垂直半径
           border-radius:10px;
           以10px为半径，画圆，以得到的弧度为边角。
  

        可以按照四个角来设置：
            border-top-left-radius: 50px;
            border-top-right-radius: 50px;
            border-bottom-left-radius: 50px;
            border-bottom-right-radius: 50px;

            border-radius: 左上 右上 右下 左下;
            省略的角度，取对角的值。

        半径写法：
            border-radius: 150px/200px; 水平半径/垂直半径

• 盒子阴影
  box-shadow
  格式： box-shadow:水平偏移 垂直偏移 模糊度 阴影大小 阴影颜色 内阴影/外阴影
  

线性渐变

• 线性渐变：
  格式：
  background-img:liner-gradient(方向,起始颜色…终止颜色);

   方向：to left,to right,to top,to bottom  
   
   角度 deg
  

径向渐变

• 径向渐变
  background-img：radial-gradient(辐射的半径大小 中心的位置，起始颜色，…终止颜色);

• 颜色向外辐射的中心的位置表示方法：
  1、单词
  at center
  at left
  at top
  at right
  at bottom
  2、 px
  按照左上角进行位移

• eg：

 .box{
    
    
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background-image: radial-gradient(100px at center, rgb(255, 243, 122) 0%, rgb(255, 102, 145) 97.4%);
        }