首页 > 代码库 > CSS3 常用属性（一）-- 边框、背景

CSS3 常用属性（一）-- 边框、背景

2024-09-13 10:26:48   216人阅读

      现今，界面极大的丰富，传统的 HTML+CSS 已经跟不上时代的步伐，在 CSS3 中，有太多非常好用的属性，可以很方便的做出种种炫酷的效果，接下来，我将例举一些常用的 CSS3 的属性。

　　border-radius：圆角。

border-radius : 50px ; 
/*四个角的圆角均为50px*/

border-radius : 50px  100px; 
/*左上右下的圆角是50px，左下右上的圆角是100px*/

border-radius : 10px 20px 30px 40px;  
/*第一个值是左上，第二个值是右上，第三个值是右下，第四个值是左下*/

-webkit-border-radius : 50px  100px;
/*四个角水平是50px，垂直是100px*/

      box-shadow：元素阴影。

 box-shadow : 10px 20px 5px 10px red inset;
/*第一个值表示阴影水平偏移（必填），第二个值表示阴影垂直偏移（必填），第三个值表示阴影羽化值（必填），第四个值表示阴影大小，第五个值表示阴影颜色（必填），第六个值表示内阴影*/

      border-image：边框图片。border-image属性可以能给元素的边框添加背景图片。`border-image`属性是复合属性用于设置`border-image-source`，`border-image-slice`，`border-image-width`，` border-image-outset` 和`border-image-repeat` 的值。

border-image-source:url(1.png);
 /*用于指定要用于绘制边框的图像的位置*/

border-image-slice:33; 
 /*图像边界向内偏移33%*/

border-image-width:20px;
 /*图像边界的宽度为20px*/

border-image-outset:20px;
 /*用于指定在边框外部绘制的量，此处是外偏20px*/

border-image-repeat:stretch;
 /*图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch 默认)*/

 

　　在 CSS3 中，background 又有了一些增加，现例举三个常用的新增背景属性。

　　background-size，控制背景图片的大小。

background-size:100%;
/*背景图片宽度和元素宽度相同，高度为auto*/

background-size:100% 100%;
/*背景图片宽高和元素宽高相同，图片有可能被拉伸*/

background-size:100px;
/*背景图片宽度为100px，高度为auto*/

background-size:100px 100px;
/*背景图片宽高均为100px，图片有可能被拉伸*/

background-size:cover;
/*背景图片较小边铺满整个元素，另一边auto*/

background-size:contain;
/*背景图片较大边铺满整个元素，另一边auto*/

　　background-clip，后面可以赋值三种，分别是：border-box（边框域）、padding-box（内间距域）、content-box（内容域），该属性的意思是背景在哪个区域以内显示。

　　background-origin，同样可以赋值三种，分别是：border-box（边框域）、padding-box（内间距域）、content-box（内容域），该属性的意思是背景图片铺在哪个区域以内，即若没有设置背景定位的属性，背景图片原点落在哪个区域内。

CSS3 常用属性（一）-- 边框、背景


联系
我们