css3 边框、背景

css3 边框

我是图片

border-radius边框圆角

border-radius:用于设置边框圆角

分别设置四个角,每个角2个值

1
2
3
4
5
6
7
8
div{
border-top-left-radius:30px 40px;
border-top-right-radius:50px;
border-bottom-right-radius:20px;
border-bottom-left-radius:10px;
/*简写*/
border-radius: 30px 50px 20px 10px/40px 50px 20px 10px;
}

我是图片

图案例子

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
div{
margin:25px auto 0;
width:50px;
height:50px;
background:#d5d2c1;
line-height:50px;
text-align:center;
font-weight:bold;
}
.A{border-radius:10px;}
.B{border-radius:25px;}
.C{border-radius:25px 0;}
.D{border-radius:25px 0 25px 25px;}
.E{border-radius:0 0 0 25px;}
.F{width:100px;border-radius:50px/25px;}
.G{
width:0;
height:0;
background:transparent;
border:25px solid #d5d2c1;
border-radius:25px;
border-right-color:transparent;
}
.H{
width:0;
height:0;
background:transparent;
border:25px solid transparent;
border-radius:25px/10px;
border-top-color:#d5d2c1;
border-bottom-color:#d5d2c1;
}

我是图片

border-image边框图片

border-image:用于设置边框图片。

属性

属性 描述
border-image-source 图片的路径
border-image-slice 图片边框剪切的范围
border-image-width 图片边框的宽度
border-image-outset 边框图像区域超出边框的量
border-image-repeat stretch-拉伸(默认)、repeat-平铺、round-铺满
border-image 简写:border-image: source slice repeat

素材

我是图片

素材1例子

1
2
3
4
5
6
7
8
9
10
11
div{
width: 200px;
height: 100px;
border-image:url(7_sucai1.png) 100% 100% 100% 100%;
border-width:20px;
border-style: solid;
font-size: 50px;
line-height: 100px;
text-align: center;
border-image:url(7_sucai1.png) 33% 33% 33% 33%;
}

我是图片

1
2
3
div{
border-image:url(7_sucai1.png) 33% 33% 33% 33%;
}

我是图片

1
2
3
div{
border-image:url(7_sucai1.png) 33% repeat;
}

我是图片

1
2
3
div{
border-image:url(7_sucai1.png) 33% round;
}

我是图片

1
2
3
div{
-webkit-border-image:url(7_sucai1.png) 33% round;
}

我是图片

素材2例子

我是图片

1
2
3
div{
-webkit-border-image:url(7_sucai2.png) 0 10;
}

css3 背景

属性 描述
background-size 规定背景图片的尺寸
background-origin 规定背景图片的定位区域
background-clip 规定背景的绘制区域

背景素材

我是图片

background-size属性

属性值

属性值 描述
length 指定长度值
percentage 指定百分比
auto 实际比例大小
cover 等比缩放到完全覆盖容器,背景图像有可以超出容器
contain 背景图像始终完整显示到容器内,可能会留空
1
2
3
4
div{
background-image: url(7_bg.jpg);
background-size: 100% auto;
}

我是图片

background-origin属性

属性值

属性值 描述
border-box 背景起点在边框上
padding-box 背景起点在内边距上(默认)
content-box 背景起点在内容上
1
2
3
4
5
div{
background-image: url(7_bg.jpg);
background-size: 100% auto;
background-origin: border-box;
}

我是图片

background-clip属性

###属性值

属性值 描述
border-box 边框之外的背景剪切
padding-box 内边距之外的背景剪切
content-box 内容之外的背景剪切
1
2
3
4
5
6
div{    
background-image: url(7_bg.jpg);
background-size: 100% auto;
background-origin: border-box;
background-clip: padding-box;
}

我是图片

文章作者: Coio
文章链接: http://yoursite.com/2018/03/22/css3 边框、背景/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Coio
打赏
  • 微信
  • 支付寶