h5-15

Posted 2021-03-03 qianfur

 1     <style>
 2         .box{
 3             float: left;
 4             width: 100px;
 5             height: 100px;
 6             background: url(images/3.jpg) no-repeat left top;
 7             background-size: 50px;
 8             padding: 50px;
 9             border: 5px dotted red;
10             margin: 0 20px 20px 0;
11         }
12         .box2{
13             background-origin: content-box;
14         }
15         .box3{
16             background-origin: padding-box;
17         }
18         .box4{
19             background-origin: border-box;
20         }
21     </style>

<div class="box box1">内容内容内容内容内容内容内容内容内容</div>
<div class="box box2">内容内容内容内容内容内容内容内容内容</div>
<div class="box box3">内容内容内容内容内容内容内容内容内容</div>
<div class="box box4">内容内容内容内容内容内容内容内容内容</div>

 

 background-clip

 1     <style>
 2         .box{
 3             float: left;
 4             width: 100px;
 5             height: 100px;
 6             background: #f0f;
 7             padding: 50px;
 8             border: 5px dotted red;
 9             margin: 0 20px 20px 0;
10         }
11         /* background-clip  裁剪 */
12         .box2{
13             background-clip: border-box;
14             /* 默认值 */
15         }
16         .box3{
17             background-clip: padding-box;
18         }
19         .box4{
20             background-clip: content-box;
21         }
22     </style>

<div class="box box1">内容内容内容内容内容内容内容内容内容</div>
<div class="box box2">内容内容内容内容内容内容内容内容内容</div>
<div class="box box3">内容内容内容内容内容内容内容内容内容</div>
<div class="box box4">内容内容内容内容内容内容内容内容内容</div>

 

 2、linear-gardient线性渐变

 1     <style>
 2         .box{
 3             float: left;
 4             width: 200px;
 5             height: 200px;
 6             border: 2px solid;
 7             margin: 0 20px 20px 0;
 8         }
 9         .box1{
10             background: -webkit-linear-gradient(red, yellow);
11             background: -o-linear-gradient(red, yellow);
12             background: -ms-linear-gradient(red, yellow);
13             background: linear-gradient(red, yellow);/* 标准的语法（必须放在最后） */
14         }
15         .box2{
16             background: -webkit-linear-gradient(left,red,yellow);
17             background: -o-linear-gradient(left,red,yellow);
18             background: -ms-linear-gradient(left,red,yellow);
19             background: linear-gradient(left,red,yellow);
20         }
21         .box3{
22             background: -webkit-linear-gradient(180deg,red,yellow);
23             background: -o-linear-gradient(180deg,red,yellow);
24             background: -ms-linear-gradient(180deg,red,yellow);
25             background: linear-gradient(180deg,red,yellow);
26         }
27         .box4{
28             background: -webkit-repeating-linear-gradient(top,red 0%,yellow 30%);
29             background: -o-repeating-linear-gradient(top,red 0%,yellow 30%);
30             background: -ms-repeating-linear-gradient(top,red 0%,yellow 30%);
31             background: repeating-linear-gradient(top,red 10%,yellow 30%);
32         }
33 
34         .box5{
35             width: 260px;
36             background: -webkit-radial-gradient(red 20%,yellow 50%);
37             background: -o-radial-gradient(red 20%,yellow 50%);
38             background: -ms-radial-gradient(red 20%,yellow 50%);
39             background: radial-gradient(red 20%,yellow 50%);
40         }
41         .box6{
42             width: 260px;
43             background: -webkit-radial-gradient(left center,red 20%,yellow 50%);
44             background: -o-radial-gradient(left center,red 20%,yellow 50%);
45             background: -ms-radial-gradient(left center,red 20%,yellow 50%);
46             background: radial-gradient(left center,red 20%,yellow 50%);
47         }
48         .box7{
49             width: 260px;
50             background: -webkit-radial-gradient(50px 100px,circle,red 20%,yellow 50%);
51             background: -o-radial-gradient(50px 100px,circle,red 20%,yellow 50%);
52             background: -ms-radial-gradient(50px 100px,circle,red 20%,yellow 50%);
53             background: radial-gradient(50px 100px,circle,red 20%,yellow 50%);
54         }
55         .box8{
56             width: 260px;
57             background: -webkit-repeating-radial-gradient(red 20%,yellow 40%);
58             background: -o-repeating-radial-gradient(red 20%,yellow 40%);
59             background: -ms-repeating-radial-gradient(red 20%,yellow 40%);
60             background: repeating-radial-gradient(red 20%,yellow 40%);
61         }
62 
63     </style>

<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>


<div class="box box5"></div>
<div class="box box6"></div>
<div class="box box7"></div>
<div class="box box8"></div>

 

 3、resize 属性规定是否可由用户调整元素尺寸。

 1     <style>
 2         .box1{
 3             width: 200px;
 4             height: 100px;
 5             border: 2px solid;
 6             overflow: auto;
 7             overflow: hidden;
 8             overflow: scroll;
 9             /* resize: both; */
10             /* 数值水平都可以拉伸 */
11             /* resize: horizontal; */
12             /* 水平拉伸 */
13             resize:vertical;        /*垂直拉伸*/
14         }
15         .box{
16             float: left;
17             width: 200px;
18             height: 200px;
19             padding: 10px;
20             border: 5px solid;
21             margin: 20px;
22         }
23         .box2{
24             box-sizing: content-box; /*默认值*/
25         }
26         .box3{
27             box-sizing: border-box; /* 此时盒子的width值包括左右padding+左右border+内容*/
28         }
29     </style>

<div class="box1">resize 属性规定是否可由用户调整元素尺寸。</div>

<div class="box box2"></div>
<div class="box box3"></div>