css3圆角、边界图片、盒子阴影、背景大小、填充位置、定位位置、背景颜色渐变

我就是我 2022-05-10 11:24 267阅读 0赞

**1. css3圆角：border-radius**

（1）这是个复合属性：比如：border-radius：10px；

== border-radius：10px 10px 10px 10px;对应的四个角：左上角，右上角，右下角，左下角

== 四个值分别对应：border-top-left-radius: 10px、border-top-right-radius: 10px;、border-bottom-right-radius: 10px;、border-bottom-left-radius: 10px;

这四个分开写的值也是复合属性：拿左上角举例：border-top-left-radius: 50px;

其实是：border-top-left-radius: 50px(x轴) 50px(y轴)；

效果如图：

![70][]

（2）如果左上角和右上角的x轴值的和大于了div的上边，会出现什么结果？  
答：切点会发生偏移，具体的在实例中测试便知

比如：

border-top-left-radius: 50px 50px;

border-top-right-radius: 70px 50px;

![70 1][]

**2. css3边界图片：border-image**

详情：[https://segmentfault.com/a/1190000010969367][https_segmentfault.com_a_1190000010969367]

该属性是复合属性，包括：

<table> 
 <tbody> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
   <th style="width:126px;">&nbsp;</th> 
  </tr> 
  <tr> 
   <td><em>border-image-source</em></td> 
   <td>用在边框的图片的路径。相对路径或是绝对路径</td> 
   <td style="width:126px;">&nbsp;</td> 
  </tr> 
  <tr> 
   <td><em>border-image-slice</em></td> 
   <td>图片边框向内偏移。没有单位，默认单位就是像素(px)。支持百分比值</td> 
   <td style="width:126px;">&nbsp;</td> 
  </tr> 
  <tr> 
   <td><em>border-image-width</em></td> 
   <td>图片边框的宽度。&nbsp;</td> 
   <td style="width:126px;">&nbsp;</td> 
  </tr> 
  <tr> 
   <td><em>border-image-outset</em></td> 
   <td>边框图像区域超出边框的量。</td> 
   <td style="width:126px;">&nbsp;</td> 
  </tr> 
  <tr> 
   <td><em>border-image-repeat</em></td> 
   <td>图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)。默认stretch</td> 
  </tr> 
 </tbody> 
</table>

**3. css3盒子阴影：border-shadow**

box-shadow: *h-shadow v-shadow blur spread color* inset;

<table style="width:604px;"> 
 <tbody> 
  <tr> 
   <th>值</th> 
   <th style="width:453px;">说明</th> 
  </tr> 
  <tr> 
   <td><em>h-shadow</em></td> 
   <td style="width:453px;">必需的。水平阴影的偏移量。允许负值</td> 
  </tr> 
  <tr> 
   <td><em>v-shadow</em></td> 
   <td style="width:453px;">必需的。垂直阴影的偏移量。允许负值</td> 
  </tr> 
  <tr> 
   <td><em>blur</em></td> 
   <td style="width:453px;">可选。模糊距离</td> 
  </tr> 
  <tr> 
   <td><em>spread</em></td> 
   <td style="width:453px;">可选。阴影的大小。0px表示原始大小</td> 
  </tr> 
  <tr> 
   <td><em>color</em></td> 
   <td style="width:453px;">可选。阴影的颜色。</td> 
  </tr> 
  <tr> 
   <td>inset</td> 
   <td style="width:453px;">可选。从外层的阴影（开始时）改变阴影内侧阴影</td> 
  </tr> 
 </tbody> 
</table>

比如：box-shadow: 5px 5px 2px 0px green;

![70 2][]

**4. background-size**

规定背景图像的尺寸大小

<table> 
 <tbody> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
   <th>测试</th> 
  </tr> 
  <tr> 
   <td><em>length</em></td> 
   <td> <p>设置背景图像的高度和宽度。</p> <p>第一个值设置宽度，第二个值设置高度。</p> <p>如果只设置一个值，则第二个值会被设置为 "auto"。</p> </td> 
   <td><a href="http://www.w3school.com.cn/tiy/c.asp?f=css_background-size" rel="nofollow">测试</a></td> 
  </tr> 
  <tr> 
   <td><em>percentage</em></td> 
   <td> <p>以父元素的百分比来设置背景图像的宽度和高度。</p> <p>第一个值设置宽度，第二个值设置高度。</p> <p>如果只设置一个值，则第二个值会被设置为 "auto"。</p> </td> 
   <td><a href="http://www.w3school.com.cn/tiy/c.asp?f=css_background-size&amp;p=5" rel="nofollow">测试</a></td> 
  </tr> 
  <tr> 
   <td>cover</td> 
   <td> <p>把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。</p> <p>背景图片的宽填充</p> </td> 
   <td><a href="http://www.w3school.com.cn/tiy/c.asp?f=css_background-size&amp;p=7" rel="nofollow">测试</a></td> 
  </tr> 
  <tr> 
   <td>contain</td> 
   <td>把图像图像扩展至最大尺寸，背景图片的高填充</td> 
  </tr> 
 </tbody> 
</table>

**5. background-origin**

**background-origin 属性规定 background-position 属性相对于什么位置来定位。**

注释：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。

<table> 
 <tbody> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
   <th>测试</th> 
  </tr> 
  <tr> 
   <td>padding-box</td> 
   <td>背景图像相对于内边距框来定位。</td> 
   <td><a href="http://www.w3school.com.cn/tiy/c.asp?f=css_background-origin" rel="nofollow">测试</a></td> 
  </tr> 
  <tr> 
   <td>border-box</td> 
   <td>背景图像相对于边框盒来定位。</td> 
   <td><a href="http://www.w3school.com.cn/tiy/c.asp?f=css_background-origin&amp;p=2" rel="nofollow">测试</a></td> 
  </tr> 
  <tr> 
   <td>content-box</td> 
   <td>背景图像相对于内容框来定位。</td> 
   <td><a href="http://www.w3school.com.cn/tiy/c.asp?f=css_background-origin&amp;p=3" rel="nofollow">测试</a></td> 
  </tr> 
 </tbody> 
</table>

**6. background-clip**

**background-clip 属性规定背景的绘制区域。背景图片或背景颜色**

*object*.style.backgroundClip="content-box"

<table> 
 <tbody> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
   <th>测试</th> 
  </tr> 
  <tr> 
   <td>border-box</td> 
   <td>背景被裁剪到边框盒。（默认值）</td> 
   <td><a href="http://www.w3school.com.cn/tiy/c.asp?f=css_background-clip" rel="nofollow">测试</a></td> 
  </tr> 
  <tr> 
   <td>padding-box</td> 
   <td>背景被裁剪到内边距框。</td> 
   <td><a href="http://www.w3school.com.cn/tiy/c.asp?f=css_background-clip&amp;p=2" rel="nofollow">测试</a></td> 
  </tr> 
  <tr> 
   <td>content-box</td> 
   <td>背景被裁剪到内容框。</td> 
   <td><a href="http://www.w3school.com.cn/tiy/c.asp?f=css_background-clip&amp;p=3" rel="nofollow">测试</a></td> 
  </tr> 
 </tbody> 
</table>

**7. 背景颜色渐变 **

具体介绍，以及兼容性：[http://www.runoob.com/css3/css3-gradients.html][http_www.runoob.com_css3_css3-gradients.html]

**（1）线性渐变：linear-gradient**

1）渐变方向：left top right等、45deg、90deg等两种方向方式。

2）颜色开始变化和结束变化的设置：百分比，默认起始变化是0%，终止变化是100%。

3）线性渐变 - 透明度：为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

4）重复的线性渐变：repeating-linear-gradient() 函数用于重复线性渐变。[查看实例][Link 1]

**（2）径向渐变：radial-gradient**

background: radial-gradient(*center, shape size, start-color, ..., last-color*);

1）渐变中心，可选参数，如30px 20px指距离左侧30px距离上侧20px，可以是像素，可以是百分比，也可以是关键字，默认为中心位置。

2）shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

3）size 参数定义了渐变的大小。它可以是以下四个值：

**closest-side****：**指定径向渐变的半径长度为从圆心到离圆心最近的边

**closest-corner****：**指定径向渐变的半径长度为从圆心到离圆心最近的角

**farthest-side****：**指定径向渐变的半径长度为从圆心到离圆心最远的边

**farthest-corner****：**指定径向渐变的半径长度为从圆心到离圆心最远的角

4）重复的径向渐变

repeating-radial-gradient() 函数用于重复径向渐变。[实例测试][Link 2]

background: repeating-radial-gradient(red, yellow 10%, green 15%)

![70 3][]

[70]: /images/20220510/61d8b1317d784ba19213d69635a63587.png
[70 1]: /images/20220510/4948e9d3bc34431cac14af2d3368ba72.png
[https_segmentfault.com_a_1190000010969367]: https://segmentfault.com/a/1190000010969367
[70 2]: /images/20220510/e45ed9285b83482291b52fed35f60e75.png
[http_www.runoob.com_css3_css3-gradients.html]: http://www.runoob.com/css3/css3-gradients.html
[Link 1]: http://www.runoob.com/try/try.php?filename=trycss3_gradient-linear_repeating
[Link 2]: http://www.runoob.com/try/try.php?filename=trycss3_gradient-radial_repeating
[70 3]: /images/20220510/02f5063be724409184205a028bf55e14.png