本文摘自PHP中文网,作者藏色散人,侵删。
css背景图加边框的方法:首先创建一个HTML示例文件;然后通过“background-image”引入一张背景图;最后通过border属性设置边框即可。
本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。
背景样式
常用的背景样式
- 背景色:background-color
1 2 3 |
|
- 背景图像:background-image
1 |
|
- 背景图片重复:background-repeat
值 | 描述 |
---|---|
repeat | 默认。背景图像将在垂直方向和水平方向重复 |
repeat-x | 背景图像将在水平方向重复 |
repeat-y | 背景图像将在垂直方向重复 |
no-repeat | 背景图像将仅显示一次 |
inherit | 规定应该从父元素继承background-repeat属性的设置 |
- 背景图片定位:background-position
background-position属性值:
①使用关键字:background-position:center left
②使用百分数值:background-position: 50% 50%
③使用长度值:background-position:300px 100px
1 2 |
|
- 背景图片固定:background-attachment
background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。
- scroll:默认值。背景图像会随着页面的滚动而移动。
- fixed:当页面的其余部分滚动时,背景图像不会移动。
【推荐:css视频教程】
background-size
- 规定背景图片的尺寸
- 语法:
background-size: length| percentage| cover| contain;
值 | 描述 |
---|---|
length | 以浮点数字和单位组成的长度值来设置背景图像的宽度和高度,如果只设置第一个值,则第二个值会被设置为"auto" |
percentage | 以父元素的百分比来设置背景图像的宽度和高度,如果只设置第一个值,则第二个值会被设置为"auto" |
cover | 保持背景图像本身宽高比例,将图片缩放到正好完全覆盖所定义背景的区域 |
contain | 保持背景图像本身宽高比例,将图片缩放到宽度或高度正好适应所定义背景的区域 |
cover和contain
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
background-origin
- 规定背景图片的定位区域(background-position的参考位置)
- 语法:
background-origin: border-box | padding-box | content-box;
默认是padding-box
background-origin
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
background-clip
- 规定背景的绘制区域(决定背景在哪些区域显示)。
- 语法:background-clip: border-box| padding-box| content-box;
值 | 描述 |
---|---|
border-box | 从边框区域向外裁剪背景 |
padding-box | 从补白区域向外裁剪背景 |
content-box | 从内容区域向外裁剪背景 |
background-clip与background-origin
background-clip:border| padding| content
指定背景在哪些区域可以显示,但与背景开始绘制的位置无关。背景的绘制的位置可以出现在不显示背景的区域,这时就相当于背景图片被不显示背景的区域裁剪了一部分。background-origin:padding| border| content
指定背景从哪个区域(边框、补白或内容)开始绘制。可以用此属性在边框上绘制背景,但边框上的背景显不显示出来就要由background-clip来决定了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
边框样式
常用的边框样式
设置边框宽度:
border-width
宽度值。示例:border-width:1px;
设置边框颜色:
border-color
颜色。示例:border-color:#cccccc;
设置边框样式:
border-style
样式关键字。示例:border-style: solid;
边框线类型
- 边框复合样式:
border: width / style / color
示例:border: 3px dotted#ff9900
border-radius
圆角边框――border-radius 属性。
- 语法
border-radius: 1-4 length | %;
border-radius
属性可包含两个参数值,第一个值表示圆角的水平半径,第二个值表示圆角的垂直半径,两个参数值通过斜线分隔。如果仅包含一个参数值,表示两个值相同,即1/4圆角。
单位 | 描述 |
---|---|
length | 定义圆角的形状。(圆角半径) |
% | 比百分比定义圆角的形状 |
border-radius
相关阅读 >>
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者