zoukankan      html  css  js  c++  java
  • background属性及阴影知识点,CSS3部分新增属性!

    CSS3知识点

    background属性

    1、background简写

      // background: url(img/1.jpg) no-repeat left top; 

     

    2、多背景

      每组属性间逗号隔开;

      为避免背景将图像盖住,背景色通常定义在最后一组上;

      {
        background: url(img/1.jpg) no-repeat left top,   
         url(img/2.jpg) no-repeat right bottom pink;
      }

     

    3、background-size 设置背景图片大小

      cover: 会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏;

      contain:会自动调整缩放比例,保证图片始终完整显示在背景区域,则背景区可能出现空白;

     

    4、background-origin

      border-box:背景图片的摆放以border区域为参考;

      padding-box:背景图片的摆放以padding区域为参考;

      content-box:背景图片的摆放以content区域为参考;

     

    5、background-clip

      将背景和背景色粗暴的裁剪,通常和background-origin一起使用;

        border-box: 背景延伸至边框外沿,但是被边框压着;

        padding-box: 背景延伸至内边距外沿;

        content-box:背景被裁剪至内容区(content box)外沿。

     

    阴影

      1、文字阴影

        text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;

      2、盒子阴影

        box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸 阴影颜色 内外阴影;

                内外阴影:默认为外阴影,想改为内阴影,则添加inset;

          {
            box-shadow:2px 2px 3px 4px rgba( 0, 0, 0, 0.4),   
                         5px 5px 4px rgba( 0, 0, 0,0.4) inset;
          }     

      注:其中水平位置和垂直位置均为必选;多层阴影叠加依然用逗号隔开。

     

  • 相关阅读:
    PTA 7-6 列出连通集(深搜+广搜)
    TZOJ 2648 小希的迷宫(并查集)
    HDU 3342 Legal or Not(拓扑排序)
    哈夫曼树
    mst
    [THUWC2017]随机二分图
    视察
    [bzoj3274]Circle
    [bzoj3273]liars
    求导相关
  • 原文地址:https://www.cnblogs.com/isremya/p/12640014.html
Copyright © 2011-2022 走看看