1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.box{
width: 300px;
height: 200px;
background-color: #0070A9;
border: 27px solid #ccc;
border-image: url(./images/panel_tools.png);
border-image-slice: 27 12 14 20;
切割顺序是，上一刀，右一刀，下一刀，左一刀*/
默认填充方式是拉伸 stretch*/
border-image-repeat: repeat;*/
可以设置成平铺*/
border-image-repeat: round;*/
整数次平铺，有可能放大缩小*/
border-image-repeat: space;*/
也会整数次平铺，不放大或缩小，但是会有一定的间隙*/
border-image-repeat: space round;*/
两个值时，第一个水平，第二个垂直*/
border-image: url(../../img/1.jpg) 27 12 15 21 round round;
/*可以全部放在一起写。*/
}
1
2
3
4
5
6
7
8
9
10
11
li:nth-child(3){
/*border-bottom-right-radius: 15px;*/
/*border-bottom-right-radius: 15px 30px;*/
/*相当于用椭圆进行切割*/
border-radius: 40px 30px 20px 10px / 10px 20px 30px 40px;
border-radius: 40% 30% 20% 10% / 10% 20% 30% 40%;
可以用百分比, 百分比是对应的各个方向的边长
/*斜线前面的标识水平方向半径，斜线后面的标识垂直方向半径*/
顺序是左上,右上,右下,左下
}
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
26
27
28
29
30
31
32
33
34
35
36
37
38
.box{
width: 100px;
height: 100px;
padding: 100px;
border: 100px solid rgba(55,55,55,0.2);
background:
/*url(../../img/2.jpg) no-repeat;*/
url(../../img/1.jpg) no-repeat,
linear-gradient(to right,rgba(12,12,200,.5),rgba(85,77,0,0.6)),
linear-gradient(to top,rgba(0,0,250,0.5),rgba(250,120,11,0.6));
/*可以设置多层背景。渐变可以rgba 可以防止覆盖。*/
/*有没有办法让图片也能进行透明度的设置？*/
/*让图片完全覆盖区域,不留余白,*/
/*background-size: cover;*/
/*让图片完整展示, 可能有留白*/
/*background-size: contain;*/
/*背景图片默认从padding开始显示*/
/*background-origin: content-box ;*/
/*content-box 起点为内容区域*/
background-origin: border-box ;
/*border-box 起点诶边框！这个就很有意思了，因为之前我们有过这种需求*/
/*先显示背景，后显示边框，边框的层级比背景高*/
/*background-origin: padding-box ;*/
/*这个就是默认的，也就是从padding处开始*/
/*以上是背景图片的 size 以及 origin*/
/*裁剪*/
/*background-clip: padding-box;*/
/*从pdd开始裁剪*/
/*background-clip: content-box;*/
/*从内容区域裁剪*/
/*background-clip: border-box;*/
/*从边框裁剪*/
/*其实这个还是有用的，因为之前我想裁剪显示的话，通常是通过background-position 以及div 的大小来调整的，当时挺费劲的*/
}
