CSS3——新增背景属性和边框样式

红太狼 2022-09-25 11:20 261阅读 0赞

*   *  新增背景属性
        
         *  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