【金沙澳门官网】从条纹边框的完结谈盒子模型,css3ui修饰回想

有意思的CSS标题(2): 从条纹边框的兑现谈盒子模型

【金沙澳门官网】从条纹边框的完结谈盒子模型,css3ui修饰回想。2016/09/29 · CSS ·
CSS

正文小编: 伯乐在线 –
chokcoco
。未经小编许可,禁止转发!
迎接参加伯乐在线 专辑小编。

开本种类,商讨一些有意思的 CSS
标题,抛开实用性而言,一些标题为了拓宽一下缓解难题的思路,其余,涉及部分简单忽略的
CSS 细节。

解题不考虑包容性,标题天马行空,想到什么说哪些,若是解题中有您觉得到生僻的
CSS 属性,赶紧去补习一下吗。

不断更新,不断更新,不断更新,首要的事情说叁回。

座谈一些好玩的CSS题目(1):
右边竖条的落到实处方式

具有标题汇总在自身的 Github 。

1.box-shadow
属性向框添加三个要么四个黑影。

  语法: box-shadow: h-shadow v-shadow blur spread color inset
    h-shadow 必须,水平阴影的职分,允许负值。
    v-shadow 必须,垂直阴影的岗位,允许负值。
    blur 可选 模糊距离。
    spread 可选,阴影的尺寸。
    color 可选,阴影的颜料。
    inset 可选,将表面阴影(outset) 改为内容步阴影。
  示例:
    <style>
      .shadow{width: 300px; height: 150px; margin: 0 auto;}
      .shadow img{ box-shadow: 3px 3px 4px #000;}
    </style>
    <div class=”shadow”>
      <img src=”1.png”>
    </div>
  结果:如图

1.box-shadow
属性向框添加三个或者多个黑影。

  语法: box-shadow: h-shadow v-shadow blur spread color inset
    h-shadow 必须,水平阴影的岗位,允许负值。
    v-shadow 必须,垂直阴影的职位,允许负值。
    blur 可选 模糊距离。
    spread 可选,阴影的尺寸。
    color 可选,阴影的水彩。
    inset 可选,将表面阴影(outset) 改为内容步阴影。
  示例:
    <style>
      .shadow{width: 300px; height: 150px; margin: 0 auto;}
      .shadow img{ box-shadow: 3px 3px 4px #000;}
    </style>
    <div class=”shadow”>
      <img src=”1.png”>
    </div>
  结果:如图

css3 UI 修饰——回想,css3ui修饰回想

1.box-shadow 属性向框添加3个依然多个黑影。
  语法: box-shadow: h-shadow v-shadow blur spread color inset
    h-shadow 必须,水平阴影的地方,允许负值。
    v-shadow 必须,垂直阴影的职位,允许负值。
    blur 可选 模糊距离。
    spread 可选,阴影的尺码。
    color 可选,阴影的颜色。
    inset 可选,将表面阴影(outset) 改为内容步阴影。
  示例:
    <style>
      .shadow{width: 300px; height: 150px; margin: 0 auto;}
      .shadow img{ box-shadow: 3px 3px 4px #000;}
    </style>
    <div class=”shadow”>
      <img src=”1.png”>
    </div>
  结果:如图

      金沙澳门官网 1

    

  示例:
    <style>
      .shadow{width: 300px; height: 150px; margin: 0 auto;
        background: yellow; box-shadow: 4px 4px 3px #000
inset;}
    </style>
    <div class=”shadow”>
    </div>
  结果:如图

    金沙澳门官网 2  

2.border-radius

    成分添加圆角边框。
      语法:border-radius: 1-4 length | % / 1-4 length | %;
      注意:多个值的次第为,左上角,右上角,右下角,左下角。
        border-radius: 2em 1em 4em / 0.5em 3em;
          等价于:
        border-top-left-radius: 2em 0.5em;
        border-top-right-radius: 1em 3em;
        border-bottom-right-radius:4em 0.5em;
        border-bottom-left-radius:1em 3em;
        border-radius协助百分比率 %
      示例:
        <style>
          .radius-test1 { width: 100px; height: 100px;
                   margin: 0 auto; border: 50px solid
#cd0000;
                    border-radius: 50%; }
        </style>
        <div class=”radius-test1″></div>
      结果:如图

        金沙澳门官网 3

3.border-image
  元素边框背景
  用于安装属性:
    border-image-source 用在边框的图纸的不二法门
    border-image-slice 图片边框向内偏移
    border-image-width 图片边框的大幅度
    border-image-outset 边框图像区域超出边框的量
    border-image-repeat 图像边框是不是平铺(repeated)
        铺满(rounded )可能拉伸(stretched)暗中认同。
    边框将border-image 分成了9部分:
border-top-image,border-right-image
      border-bottom-image , border-left-image,
border-top-left-image
      border-top-right-image, border-bottom-left-image,
      border-bottom-right-image
位于三个正方向的尚未突显效果,不会平铺…
  示例:
    <style>
      .border_image{width:400px; height:100px;border:1em double
orange;border-image:url(1.png) 27;}
    </style>
    <div class=”border_image”></div>
  结果:如图

    金沙澳门官网 4

  示例:(平铺 round)
    <style>
      .border_image{width:400px; height:100px;border:1em double
orange;border-image:url(1.png) 27 round;}
    </style>
    <div class=”border_image”></div>
  结果:如图

    金沙澳门官网 5

  

  示例:(平铺 repeat)
金沙澳门官网,    <style>
      .border_image{width:400px; height:100px;border:1em double
orange;border-image:url(1.png) 27 repeat;}
    </style>
    <div class=”border_image”></div>
  结果:如图

    金沙澳门官网 6

4.gradient 渐变

  分为linear-gradient(线性渐变) 和 radial-gradient (径向渐变)

    linear-gradient
      语法background: -webkit-linear-gradient( top,#ccc,#000);
        参数: 共七个参数
第2个参数表示为线性渐变的取向,top是从上往下,
            left 是从左到右 假如定义成left
top,那就是从左上角到右下角。
            第③个和第⑧个参数分别是源点颜色和极端颜色。
        示例:
          <style>
              .gradient{width:300px; height: 180px;
                background:-webkit-linear-gradient(left,
                red 50px, yellow 200px);}
          </style>
          <div class=”gradient”></div>
        结果:如图

          金沙澳门官网 7

      示例:可以填充角度
        <style>
            .gradient{width:300px; height: 180px;
                background:-webkit-linear-gradient(45deg,
                red 50px, yellow 200px);}
        </style>
        <div class=”gradient”></div>
        结果:如图

          金沙澳门官网 8

    radial-gradient 径向渐变。
      渐变的模样是ellipse(表示星型)
farthest-cormer(表示到最远的犄角)
      语法:radial-gradient(red, green, blue);
      示例:
        <style>
            .gradient{width:300px; height: 180px;
              background:-webkit-radial-gradient
              (circle, red, yellow, green);}
        </style>
        <div class=”gradient”></div>
      结果:如图

        金沙澳门官网 9

      示例:ellipse椭圆
          <style>
            .gradient{width:300px; height: 180px;
              background:-webkit-radial-gradient(
                ellipse, red, yellow, green);}
          </style>
          <div class=”gradient”></div>
      结果:如图

        金沙澳门官网 10

      示例: 不一样尺寸大小关键字的利用。
        <style>
          .gradient{width:300px; height:180px;background:
              -webkit-radial-gradient(60% 55%, closest-
                side,blue,green,yellow,black);}
        </style>
        <div class=”gradient”></div>
      结果:如图

        金沙澳门官网 11  

    重复的朝向渐变
      repeating-radial-gradient() 函数用于重复径向渐变
    示例:
      <style>
        .gradient{width:300px; height: 180px;
            background: -webkit-repeating-radial-
            gradient(red, yellow 10%, green 15%);}
      </style>
      <div class=”gradient”></div>
    结果:如图

      金沙澳门官网 12

    进度条小效率
      <style>
        .wrap{width:300px;height:25px;
            overflow:hidden;border:1px
            solid #000;}
        .box{width:400px;height:30px;
            background:-webkit-repeating-
            linear- gradient(15deg,green 0,
            green 10px,#fff 10px,#fff
            20px); transition:3s;}
        .wrap:hover .box{ margin-
              left:-100px;}
      </style>
      <div class=”wrap”>
        <div class=”box”></div>
      </div>
     结果:如图

      金沙澳门官网 13

5.background-origin
  规定background-position 属性相对于 什么职位来恒定
    语法:background-origin: padding-box|border-box|content-box;
        padding-box 背景图像相对于内边距框来稳定。
        border-box 背景图像嫌贵对于
        content-box 背景图像绝对月情节框来稳定
    示例:
      <style>
        .background_origin{width: 300px;height:
150px;border:1px solid
black;padding:35px;background-image:url(‘1.png’);
            background-repeat:no-repeat;background-position:left;background-origin:content-box;}
      </style>
      <div class=”background_origin”></div>
    结果:如图

      金沙澳门官网 14

6.background-clip
  规定背景的绘图区域
    值: border-box 背景被减去到边框盒
       padding-box 背景被裁剪到内边距框
      content-box 背景被裁剪到内容框
      no-clip:从border区域向外裁剪背景。
    示例:
      <style>
        .background_clip{width:200px;height:50px;padding:50px;background-color:yellow;
                background-clip:content-box;border:2px
solid #92b901;}
      </style>
      <div class=”background_clip”></div>
    结果:如图

      金沙澳门官网 15

     demo下载

UI 修饰——回看,css3ui修饰回看 1.box-shadow
属性向框添加三个要么多少个黑影。 语法: box-shadow: h-shadow v-shadow blur
spread color inset h-shadow 必…

贰 、类似上边这一个图形,只行使三个标签,可以有多少种达成格局:

金沙澳门官网 16

即使大家的单标签为 div:

XHTML

<div></div>

1
<div></div>

概念如下通用 CSS:

CSS

div{ position:relative; width: 180px; height: 180px; }

1
2
3
4
5
div{
    position:relative;
    width: 180px;
    height: 180px;
}

这一题主要考查的是盒子模型 Box Model 与
背景 background 的涉及,以及利用 background-clip 改变背景的填充格局。

background 在 Box Model 中,他是布满整个因素的盒子区域的,并不是从 padding 内部起头(也等于说从
border
就从头啦),只不过实线边框(solid)部分遮住了一部分 background ,所以我们采取虚线边框(dashed)就能够看看背景观是从 border 内部初阶的。

我们给 div 添加如下样式:

CSS

div{ background:#9c27b0; border:20px dashed #2196f3; }

1
2
3
4
div{
    background:#9c27b0;
    border:20px dashed #2196f3;
}

结果如下:
金沙澳门官网 17

但有一点内需小心,background-color 是从要素的边框左上角起到右下角止,而 background-image 却不均等,他是从 padding 边缘的左上角起而到 border 的右下角边缘止。

background image 的绘图中有多个因素决定了绘图区域:

  • background positioning
    area。
    background-origin 属性决定了那么些相对稳定地点,默许为 padding-box。所以私下认同的背景图片绘制是从
    padding box 的左上顶点先导的。
  • background painting
    area。
    background-clip 属性决定了绘图区间,暗中认同为 border-box。所以在background-repeat: repeat 的情况下:

The image is repeated in this direction as often as needed to cover
the background painting area.

啊,什么看头啊,你能够戳进这么些 demo 看看,不荒谬状态下的背景图填充如下:

金沙澳门官网 18

理所当然,这么些填充规则是可以通过 background-clip 改变的。

background-clip 设置元素的背景(背景图片或颜料)是还是不是延长到边框下边。

语法:

CSS

{ background-clip: border-box; // 背景延伸到边框外沿(然而在边框之下)
background-clip: padding-box; //
边框上面没有背景,即背景延伸到内边距外沿。 background-clip: content-box;
// 背景裁剪到内容区 (content-box) 外沿。 }

1
2
3
4
5
{
    background-clip: border-box;  // 背景延伸到边框外沿(但是在边框之下)
    background-clip: padding-box; // 边框下面没有背景,即背景延伸到内边距外沿。
    background-clip: content-box; // 背景裁剪到内容区 (content-box) 外沿。
}

XHTML

<!– 填充与background-clip属性有关 –> <!–
背景观的填写规则,默许为 border-box 从盒子最左上角到最右下角 –>
<div class=”bgColor”></div> <div class=”bgColor
contentBox”></div> <div class=”bgColor
paddingBox”></div> <!– 背景图的填充规则,暗中同意为 border-box
从盒子的左上角padding到最右下角 –> <div
class=”bgImg”></div> <div class=”bgImg
contentBox”></div> <div class=”bgImg
paddingBox”></div>

1
2
3
4
5
6
7
8
9
10
11
12
<!– 填充与background-clip属性有关 –>
<!– 背景色的填充规则,默认为 border-box
            从盒子最左上角到最右下角 –>
<div class="bgColor"></div>
<div class="bgColor contentBox"></div>
<div class="bgColor paddingBox"></div>
 
<!– 背景图的填充规则,默认为 border-box
            从盒子的左上角padding到最右下角 –>
<div class="bgImg"></div>
<div class="bgImg contentBox"></div>
<div class="bgImg paddingBox"></div>

CSS

div{ width:150px; height:150px; margin:50px 10px;; border:20px dashed
rgba(0, 0, 0, 0.5); float:left; padding:10px; // background-size:cover;
} .bgColor{ background-color:#ff7300; // background-clip:border-box; }
.bgImg{ background-color:#ff7300;
background-image:url(”);
background-repeat:no-repeat; // background-clip:border-box; }
.contentBox{ background-clip:content-box; } .paddingBox{
background-clip:padding-box; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
div{
    width:150px;
    height:150px;
    margin:50px 10px;;
    border:20px dashed rgba(0, 0, 0, 0.5);
    float:left;
    padding:10px;
    // background-size:cover;
}
.bgColor{
    background-color:#ff7300;
    // background-clip:border-box;
}
.bgImg{    
    background-color:#ff7300;
    background-image:url(‘http://www.qq1234.org/uploads/allimg/150602/8_150602171754_2.jpg’);
    background-repeat:no-repeat;
    // background-clip:border-box;
}
.contentBox{
    background-clip:content-box;
}
.paddingBox{
    background-clip:padding-box;
}

See the Pen CssBackground by
Chokcoco (@Chokcoco) on
CodePen.

三番7次说回本题,接下去,只需求将中间有些填充为淡湖蓝即可,那么些用伪元素能够轻松做到,所以,其中三个措施如下:

CSS

div{ background:#9c27b0; border:20px dashed #2196f3; } div::after{
content:””; position:absolute; top:0; left:0; bottom:0; right:0;
background:#fff; }

1
2
3
4
5
6
7
8
9
10
11
12
13
div{
    background:#9c27b0;
    border:20px dashed #2196f3;
}
div::after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background:#fff;
}

      金沙澳门官网 19

      金沙澳门官网 20

    

    

  示例:
    <style>
      .shadow{width: 300px; height: 150px; margin: 0 auto;
        background: yellow; box-shadow: 4px 4px 3px #000
inset;}
    </style>
    <div class=”shadow”>
    </div>
  结果:如图

  示例:
    <style>
      .shadow{width: 300px; height: 150px; margin: 0 auto;
        background: yellow; box-shadow: 4px 4px 3px #000
inset;}
    </style>
    <div class=”shadow”>
    </div>
  结果:如图

    金沙澳门官网 21  

    金沙澳门官网 22  

2.border-radius

2.border-radius

    成分添加圆角边框。
      语法:border-radius: 1-4 length | % / 1-4 length | %;
      注意:八个值的相继为,左上角,右上角,右下角,左下角。
        border-radius: 2em 1em 4em / 0.5em 3em;
          等价于:
        border-top-left-radius: 2em 0.5em;
        border-top-right-radius: 1em 3em;
        border-bottom-right-radius:4em 0.5em;
        border-bottom-left-radius:1em 3em;
        border-radius支持百分比率 %
      示例:
        <style>
          .radius-test1 { width: 100px; height: 100px;
                   margin: 0 auto; border: 50px solid
#cd0000;
                    border-radius: 50%; }
        </style>
        <div class=”radius-test1″></div>
      结果:如图

    成分添加圆角边框。
      语法:border-radius: 1-4 length | % / 1-4 length | %;
      注意:五个值的逐一为,左上角,右上角,右下角,左下角。
        border-radius: 2em 1em 4em / 0.5em 3em;
          等价于:
        border-top-left-radius: 2em 0.5em;
        border-top-right-radius: 1em 3em;
        border-bottom-right-radius:4em 0.5em;
        border-bottom-left-radius:1em 3em;
        border-radius支持百分比率 %
      示例:
        <style>
          .radius-test1 { width: 100px; height: 100px;
                   margin: 0 auto; border: 50px solid
#cd0000;
                    border-radius: 50%; }
        </style>
        <div class=”radius-test1″></div>
      结果:如图

        金沙澳门官网 23

        金沙澳门官网 24

3.border-image
  元素边框背景
  用于安装属性:
    border-image-source 用在边框的图样的路线
    border-image-slice 图片边框向内偏移
    border-image-width 图片边框的大幅
    border-image-outset 边框图像区域超出边框的量
    border-image-repeat 图像边框是或不是平铺(repeated)
        铺满(rounded )只怕拉伸(stretched)默许。
    边框将border-image 分成了9部分:
border-top-image,border-right-image
      border-bottom-image , border-left-image,
border-top-left-image
      border-top-right-image, border-bottom-left-image,
      border-bottom-right-image
位于多个正方向的从未有过体现效果,不会平铺…
  示例:
    <style>
      .border_image{width:400px; height:100px;border:1em double
orange;border-image:url(1.png) 27;}
    </style>
    <div class=”border_image”></div>
  结果:如图

3.border-image
  成分边框背景
  用于安装属性:
    border-image-source 用在边框的图样的路线
    border-image-slice 图片边框向内偏移
    border-image-width 图片边框的增加率
    border-image-outset 边框图像区域超出边框的量
    border-image-repeat 图像边框是或不是平铺(repeated)
        铺满(rounded )只怕拉伸(stretched)暗中同意。
    边框将border-image 分成了9部分:
border-top-image,border-right-image
      border-bottom-image , border-left-image,
border-top-left-image
      border-top-right-image, border-bottom-left-image,
      border-bottom-right-image
位于三个正方向的没有突显效果,不会平铺…
  示例:
    <style>
      .border_image{width:400px; height:100px;border:1em double
orange;border-image:url(1.png) 27;}
    </style>
    <div class=”border_image”></div>
  结果:如图

    金沙澳门官网 25

    金沙澳门官网 26

  示例:(平铺 round)
    <style>
      .border_image{width:400px; height:100px;border:1em double
orange;border-image:url(1.png) 27 round;}
    </style>
    <div class=”border_image”></div>
  结果:如图

  示例:(平铺 round)
    <style>
      .border_image{width:400px; height:100px;border:1em double
orange;border-image:url(1.png) 27 round;}
    </style>
    <div class=”border_image”></div>
  结果:如图

    金沙澳门官网 27

    金沙澳门官网 28

  

  

  示例:(平铺 repeat)
    <style>
      .border_image{width:400px; height:100px;border:1em double
orange;border-image:url(1.png) 27 repeat;}
    </style>
    <div class=”border_image”></div>
  结果:如图

  示例:(平铺 repeat)
    <style>
      .border_image{width:400px; height:100px;border:1em double
orange;border-image:url(1.png) 27 repeat;}
    </style>
    <div class=”border_image”></div>
  结果:如图

    金沙澳门官网 29

    金沙澳门官网 30

4.gradient 渐变

4.gradient 渐变

  分为linear-gradient(线性渐变) 和 radial-gradient (径向渐变)

  分为linear-gradient(线性渐变) 和 radial-gradient (径向渐变)

    linear-gradient
      语法background: -webkit-linear-gradient( top,#ccc,#000);
        参数: 共三个参数
第⑩个参数表示为线性渐变的趋势,top是从上往下,
            left 是从左到右 假如定义成left
top,这就是从左上角到右下角。
            第三个和首个参数分别是源点颜色和终极颜色。
        示例:
          <style>
              .gradient{width:300px; height: 180px;
                background:-webkit-linear-gradient(left,
                red 50px, yellow 200px);}
          </style>
          <div class=”gradient”></div>
        结果:如图

    linear-gradient
      语法background: -webkit-linear-gradient( top,#ccc,#000);
        参数: 共多少个参数
首个参数表示为线性渐变的可行性,top是从上往下,
            left 是从左到右 若是定义成left
top,那就是从左上角到右下角。
            第二个和首个参数分别是起源颜色和顶峰颜色。
        示例:
          <style>
              .gradient{width:300px; height: 180px;
                background:-webkit-linear-gradient(left,
                red 50px, yellow 200px);}
          </style>
          <div class=”gradient”></div>
        结果:如图

          金沙澳门官网 31

          金沙澳门官网 32

      示例:可以填充角度
        <style>
            .gradient{width:300px; height: 180px;
                background:-webkit-linear-gradient(45deg,
                red 50px, yellow 200px);}
        </style>
        <div class=”gradient”></div>
        结果:如图

      示例:可以填充角度
        <style>
            .gradient{width:300px; height: 180px;
                background:-webkit-linear-gradient(45deg,
                red 50px, yellow 200px);}
        </style>
        <div class=”gradient”></div>
        结果:如图

          金沙澳门官网 33

          金沙澳门官网 34

    radial-gradient 径向渐变。
      渐变的形象是ellipse(表示圆锥形)
farthest-cormer(表示到最远的角落)
      语法:radial-gradient(red, green, blue);
      示例:
        <style>
            .gradient{width:300px; height: 180px;
              background:-webkit-radial-gradient
              (circle, red, yellow, green);}
        </style>
        <div class=”gradient”></div>
      结果:如图

    radial-gradient 径向渐变。
      渐变的形态是ellipse(表示纺锤形)
farthest-cormer(表示到最远的角落)
      语法:radial-gradient(red, green, blue);
      示例:
        <style>
            .gradient{width:300px; height: 180px;
              background:-webkit-radial-gradient
              (circle, red, yellow, green);}
        </style>
        <div class=”gradient”></div>
      结果:如图

        金沙澳门官网 35

        金沙澳门官网 36

      示例:ellipse椭圆
          <style>
            .gradient{width:300px; height: 180px;
              background:-webkit-radial-gradient(
                ellipse, red, yellow, green);}
          </style>
          <div class=”gradient”></div>
      结果:如图

      示例:ellipse椭圆
          <style>
            .gradient{width:300px; height: 180px;
              background:-webkit-radial-gradient(
                ellipse, red, yellow, green);}
          </style>
          <div class=”gradient”></div>
      结果:如图

        金沙澳门官网 37

        金沙澳门官网 38

      示例: 不一致尺寸大小关键字的接纳。
        <style>
          .gradient{width:300px; height:180px;background:
              -webkit-radial-gradient(60% 55%, closest-
                side,blue,green,yellow,black);}
        </style>
        <div class=”gradient”></div>
      结果:如图

      示例: 不一样尺寸大小关键字的利用。
        <style>
          .gradient{width:300px; height:180px;background:
              -webkit-radial-gradient(60% 55%, closest-
                side,blue,green,yellow,black);}
        </style>
        <div class=”gradient”></div>
      结果:如图

        金沙澳门官网 39  

        金沙澳门官网 40  

    重复的朝向渐变
      repeating-radial-gradient() 函数用于重复径向渐变
    示例:
      <style>
        .gradient{width:300px; height: 180px;
            background: -webkit-repeating-radial-
            gradient(red, yellow 10%, green 15%);}
      </style>
      <div class=”gradient”></div>
    结果:如图

    重复的通往渐变
      repeating-radial-gradient() 函数用于重复径向渐变
    示例:
      <style>
        .gradient{width:300px; height: 180px;
            background: -webkit-repeating-radial-
            gradient(red, yellow 10%, green 15%);}
      </style>
      <div class=”gradient”></div>
    结果:如图

      金沙澳门官网 41

      金沙澳门官网 42

    进程条小效能
      <style>
        .wrap{width:300px;height:25px;
            overflow:hidden;border:1px
            solid #000;}
        .box{width:400px;height:30px;
            background:-webkit-repeating-
            linear- gradient(15deg,green 0,
            green 10px,#fff 10px,#fff
            20px); transition:3s;}
        .wrap:hover .box{ margin-
              left:-100px;}
      </style>
      <div class=”wrap”>
        <div class=”box”></div>
      </div>
     结果:如图

    进程条小成效
      <style>
        .wrap{width:300px;height:25px;
            overflow:hidden;border:1px
            solid #000;}
        .box{width:400px;height:30px;
            background:-webkit-repeating-
            linear- gradient(15deg,green 0,
            green 10px,#fff 10px,#fff
            20px); transition:3s;}
        .wrap:hover .box{ margin-
              left:-100px;}
      </style>
      <div class=”wrap”>
        <div class=”box”></div>
      </div>
     结果:如图

      金沙澳门官网 43

      金沙澳门官网 44

5.background-origin
  规定background-position 属性绝对于 什么职位来恒定
    语法:background-origin: padding-box|border-box|content-box;
        padding-box 背景图像相对于内边距框来恒定。
        border-box 背景图像嫌贵对于
        content-box 背景图像相对月故事情节框来定位
    示例:
      <style>
        .background_origin{width: 300px;height:
150px;border:1px solid
black;padding:35px;background-image:url(‘1.png’);
            background-repeat:no-repeat;background-position:left;background-origin:content-box;}
      </style>
      <div class=”background_origin”></div>
    结果:如图

5.background-origin
  规定background-position 属性相对于 什么岗位来定位
    语法:background-origin: padding-box|border-box|content-box;
        padding-box 背景图像相对于内边距框来定位。
        border-box 背景图像嫌贵对于
        content-box 背景图像绝对月情节框来稳定
    示例:
      <style>
        .background_origin{width: 300px;height:
150px;border:1px solid
black;padding:35px;background-image:url(‘1.png’);
            background-repeat:no-repeat;background-position:left;background-origin:content-box;}
      </style>
      <div class=”background_origin”></div>
    结果:如图

      金沙澳门官网 45

      金沙澳门官网 46

6.background-clip

6.background-clip

  规定背景的绘图区域
    值: border-box 背景被压缩到边框盒
       padding-box 背景被裁剪到内边距框
      content-box 背景被裁剪到内容框
      no-clip:从border区域向外裁剪背景。
    示例:
      <style>
        .background_clip{width:200px;height:50px;padding:50px;background-color:yellow;
                background-clip:content-box;border:2px
solid #92b901;}
      </style>
      <div class=”background_clip”></div>
    结果:如图

  规定背景的绘图区域
    值: border-box 背景被收缩到边框盒
       padding-box 背景被裁剪到内边距框
      content-box 背景被裁剪到内容框
      no-clip:从border区域向外裁剪背景。
    示例:
      <style>
        .background_clip{width:200px;height:50px;padding:50px;background-color:yellow;
                background-clip:content-box;border:2px
solid #92b901;}
      </style>
      <div class=”background_clip”></div>
    结果:如图

      金沙澳门官网 47

      金沙澳门官网 48

     demo下载

     demo下载

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图