CSS3——新增背景属性和边框样式
来源:互联网 发布:nano接收器配对软件 编辑:程序博客网 时间:2024/05/23 20:07
- 新增背景属性
- background-clip
- background-origin
- background-size
- CSS常用背景属性
- background-repeat
- background-image
- 边框样式
- border-radius
- border-image
- 新增背景属性
新增背景属性:
background-clip
显示背景的范围
属性值:
border-box:边框以内的背景,包括边框
padding-box:padding以内的背景,包括padding
content-box:content以内的背景,包括content
background-origin:
开始显示的位置,一般是以图片为背景的时候使用
属性值:
border-box:从边框开始显示
padding-box:从padding开始显示
content-box: 从content开始显示
background-size:
图像大小
属性值:
auto:保持原高度和宽度
length:后面可以跟两个数值,分别是宽度和高度,若只写一个数值,则高度自适应
percentage:后面可以跟两个数值,分别是宽度和高度(百分比),若只写一个数值,则高度自适应
cover:扩大至充满容器,一般适用于比容器小的图片
contain:缩小至充满容器,一般适用于比容器大的图片
CSS常用背景属性:
background-repeat:
图片重复
background-image:
设置背景图片,可添加一张或多张图片
例如:
background-image: url(“123.jpg”),url(“123.jpg”),url(“123.jpg”);
添加多张图片时可叠加,第一张在最上面依次往下
边框样式:
border-radius
属性介绍:
①后面跟两个值的时候,第一个表示左上与右下的角度,第二个表示右上与左下的角度
②一个值的时候,是所有角的角度
③也可以分别设置左上左下右上右下的属性
例如左上的属性为:
border-top-left-radius
border-image
图像边框(类似于切割图片)
写法:
border-image: url("../image/123.jpg") 100;border-image: url("../image/123.jpg") 100 100 100 100;
上边两行代码是等价的
第二行代码后面的四个数字分别上,右,下,左的边距
border-image: url("../image/123.jpg") 100/100px repeat repeat;
“/”后的三个参数分别是border的宽度,上和下图片填充的方式,左和右图片填充的方式。repeat平铺,stretch拉伸(默认样式),round也是平铺,不同的是如果最后一张图片没有完全显示则不显示,而是把之前的图像扩大
- CSS3——新增背景属性和边框样式
- CSS3新增的有关背景与边框的属性
- 07、CSS3新增边框属性
- CSS3 背景和边框
- CSS3-边框和背景
- 09、CSS3新增背景属性
- h5-css3新增背景属性
- CSS3背景相关新增属性
- CSS3背景与边框相关样式
- CSS3背景与边框相关样式
- CSS3使用边框和背景
- css3中新增的背景属性
- css3 背景相关的新增属性
- CSS3-新增背景系列background相关属性
- CSS3中新增的背景属性
- CSS样式——边框、背景、表格
- CSS3下不一样的阴影、背景和圆角边框样式
- CSS3:元素的边框、背景和大小
- 网易笔试题--混合颜色(异或)
- 列表框数据显示
- HTML-图像
- linux awk命令详解
- JAVA内存溢出解析
- CSS3——新增背景属性和边框样式
- ios移除storyboard中的view和无用的ViewController
- 如何得到一个自己想要大小的窗口
- jvm的常量池
- Java IO系列(二):文件读取写入
- Hive SQL的编译过程
- 冒泡,选择,插入三大基本排序解析以及Demo
- 208. Implement Trie (Prefix Tree)
- 装载和初始化