详解CSS3新增的情况特性

日期:2021-02-28 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

先前,再css里边大家了解background的几个特性color,image,repeat,attachment,position,这些全是大家再css里边常见的,那末css3新增的特性有哪些呢?往下看:

**

CSS3新增特性:background-clip ,background-origin , background-size

1.background-clip

情况的裁剪特性,是从特定部位刚开始绘图。

**

**

2.background-origin

background-Origin特性特定了情况图象的部位地区。

** 上面两个的特性值全是border-box, padding-box , content-box(这里提议要对盒子实体模型有充足掌握,那末在这里就看这3个特性值就1清2楚了),或看下图:

background-clip便是非常于再这3个部位的哪一个地区刚开始剪裁,来做到其相应的实际效果,看编码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF⑻">
  <title>Title</title>
  <style>
    #div1 {
      border: 20px dashed blue;
      padding:40px;
      background: red;
    }

    #div2{
      border: 20px dashed blue;
      padding:40px;
      background: red;
      background-clip: padding-box;
    }

    #div3{
      border: 20px dashed blue;
      padding:40px;
      background: red;
      background-clip: content-box;
    }
  </style>
</head>
<body>

<p>沒有情况裁剪 (border-box沒有界定):</p>
<div id="div1 ">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam uam erat volutpat.</p>
</div>

<p>background-clip: padding-box:</p>
<div id="div2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam uam erat volutpat.</p>
</div>

<p>background-clip: content-box:</p>
<div id="div3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam uam erat volutpat.</p>
</div>
</body>
</html>

实际效果图:

而background-origin则是再那个地区显示信息情况,看编码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF⑻">
  <title>Title</title>
  <style>
    div
    {
      border:1px solid black;
      padding:35px;
      background-image:url('1 (5).jpg');/*照片显示信息不出来必须自身去变更*/
      background-repeat:no-repeat;
      background-position:left;
    }
    #div1 {
      background-origin: border-box;/*设定padding-box实际效果1样,能够自身去试试*/
    }
    #div2 {
      background-origin: content-box;
    }
  </style>
</head>
<body>
<p>情况图象界限框的相对性部位</p>
<div id="div1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam uam erat volutpat.</p>
</div>
<p>情况图象的相对性部位的內容框</p>
<div id="div2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam uam erat volutpat.</p>
</div>
</body>
</html>

实际效果:

**

3.background-size

background-size特定情况图象的尺寸。CSS3之前,情况图象尺寸由图象的具体尺寸决策。CSS3中background-size让大家再次在不一样的自然环境中特定情况照片的尺寸。您能够特定像素或百分比尺寸。你特定的尺寸是相对父元素的宽度和高宽比的百分比的尺寸。

其特性值:

①.length设定情况照片高宽比和宽度。第1个值设定宽度,第2个值设定的高宽比。假如只得出1个值,第2个是设定为 auto(全自动)

②.lpercentage将测算相对情况精准定位地区的百分比。第1个值设定宽度,第2个值设定的高宽比。假如只得出1个值,第2个是设定为"auto(全自动)"

③.cover此时会维持图象的横纵比并将图象放缩成将彻底遮盖情况精准定位地区的最少尺寸。

④.contain此时会维持图象的横纵比并将图象放缩成将合适情况精准定位地区的最大尺寸。

总结

以上所述是网编给大伙儿详细介绍的CSS3新增的情况特性,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!

上一篇:CSS完成ul和li横向排序的两种方式 返回下一篇:没有了