CSS3新增属性----背景和边框

亦凉 2022-12-01 14:14 261阅读 0赞

一些最重要CSS3模块如下：

*  选择器
 *  盒模型
 *  背景和边框
 *  文字特效
 *  2D/3D转换
 *  动画
 *  多列布局
 *  用户界面

## CSS3 边框 ##

CSS3边框属性有： `border-radius`、`box-shadow`  
`border-image`

**CSS3圆角------border-radius**  
一个用于设置所有四个边框的半径属性的速记属性  
语法：border-radius: 1-4 length|% / 1-4 length|%;

> border-radius属性若只指定一个值，就会产生四个圆角  
> 若要分开写则其他属性为：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

若需要在四个角上一一指定：

*  四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
 *  三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
 *  两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
 *  一个值： 四个圆角值相同

初始样式：  
![在这里插入图片描述][20200827154339166.png_pic_center]添加圆角属性之后的样式：

![在这里插入图片描述][2020082715460729.png_pic_center]

**CSS3 盒阴影------box-shadow**  
附加一个或多个下拉框的阴影  
语法：box-shadow: h-shadow v-shadow blur spread color inset;

> h-shadow 必需的。水平阴影的位置。允许负值  
> v-shadow 必需的。垂直阴影的位置。允许负值

初始样式：  
![在这里插入图片描述][2020082715481745.png_pic_center]添加盒阴影属性之后的样式：

![在这里插入图片描述][20200827154757293.png_pic_center]

**CSS3 边界图片------border-image**  
设置所有边框图像的速记属性。  
语法：border-image: source slice width outset repeat|initial|inherit;

`因为博主本主没有合适的边框图片，就采用了某菜的例子嘻嘻`

效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]

## CSS3背景 ##

CSS3新的背景属性：

*  background-image
 *  background-size
 *  background-origin
 *  background-clip

**CSS3 background-image属性**

可以通过`background-image`属性添加背景图片。不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。

#image{ 
    	background-image: url(img1.gif),url(img2.gif); 
    	}
    /*可以给不同的图片设置多个不同的属性*/
    
    #image{ 
        background: url(img1.gif) right bottom no-repeat, url(img2.gif) left top repeat;
    }

**CSS3 background-size 属性**  
`background-size`指定背景图像的大小，指定的大小是相对于父元素的宽度和高度的百分比的大小。

div
    { 
        background:url(img1.gif);
        background-size:80px 60px;
        background-repeat:no-repeat;
    }
    /*伸展背景图像完全填充内容区域：*/
    div
    { 
        background:url(img1.gif);
        background-size:100% 100%;
        background-repeat:no-repeat;
    }

**CSS3 的 background-origin 属性**  
`background-origin` 属性指定了背景图像的位置区域。

> content-box, padding-box,和 border-box区域内可以放置背景图像。  
> ![在这里插入图片描述][20200827161714465.png_pic_center]

/*在 content-box 中定位背景图片：*/
    div
    { 
        background:url(img1.gif);
        background-repeat:no-repeat;
        background-size:100% 100%;
        background-origin:content-box;
    }

**CSS3 background-clip属性**  
`background-clip`背景剪裁属性是从指定位置开始绘制

#image {  
        border: 10px dotted black; 
        padding: 35px; 
        background: yellow; 
        background-clip: content-box; 
        /*background-clip: padding-box;*/
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 2]

[20200827154339166.png_pic_center]: /images/20221123/932de96a2e1a41e1b510b7518c0f0076.png
[2020082715460729.png_pic_center]: /images/20221123/1b08862a186b446a9d2a7cf993d4a9eb.png
[2020082715481745.png_pic_center]: /images/20221123/d9ec7cf10ab5480096835fd63789d04b.png
[20200827154757293.png_pic_center]: /images/20221123/899937decd5c40b7a451970529672812.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/ecd195218e114604bbbd4f00b721f8f1.png
[20200827161714465.png_pic_center]: /images/20221123/9ae7f3c584c14d73a63b135902f5ab4a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/0c42b740e4ba4ed8848ef48953d1a6d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/99c60aef9aea4a0f8fd0962d3ffa2279.png