边框圆角

border-radius:设置边框的圆角
border-radius的值最大为宽或高中最小值的一半
10px只有一个值：代表四个方向（在四个角生成一个半径为10px的1/4圆）
10px 20px 左上角和右下角 左下角和右上角
10px 20px 30px 左上角 左下角和右上角 右下角
10px 20px 30px 40px 左上角 右上角 右下角 左下角

  1. 想设置圆形，只需要给元素一样的宽高，然后设置border-radius：50%
    拥有四个属性值：
  2. 想设置椭圆形:宽高不一致，设置border-radius：50%或者设置border-radius：宽度一半/高度一半

园

  1.  .circle {
  2.       width: 100px;
  3.             height: 100px;
  4.             border: 10px solid blue;
  5.             border-radius: 50%; 
  6.  }
  1. 上半圆 
  2. .semi-circle{
  3.  width:100px;
  4.  height:50px; 
  5.  background-color:#cb18f8;
  6.  border-radius:50px 50px 0 0; /* 左上、右上、右下、左下 
  7. }
  9. 下半圆 
  10. .semi-circle2{
  11.  width:100px;
  12.  height:50px; 
  13.  background-color:#cb18f8;
  14.  border-radius:0 0 50px 50px; /* 左上、右上、右下、左下 
  15. }
  19. 左半圆 
  20. .semi-circle3{
  21.  width:50px;
  22.  height:100px; 
  23.  background-color:#cb18f8;
  24.  border-radius:50px 0 0 50px; 左上、右上、右下、左下 
  25. }
  26. 右半圆 
  27. .semi-circle4{
  28.  width:50px;
  29.  height:100px; 
  30.  background-color:#cb18f8;
  31.  border-radius:0 50px 50px 0;  左上、右上、右下、左下 
  32. }

边框三角

border-width（边框宽）
border-style（边框样式）
border-color(边框颜色)

  1. 制作三角形
  1.  {
  2.     width: 0;
  3.     height: 0;
  4.     border: 50px solid red;
  5.     border-top-color: red;
  7.      向上的三角形
  8. }
  1. 制作等边三角形
  1. {
  2.      width: 0;
  3.      height: 0;
  4.      border: 50px solid red;
  5.      border-color: transparent transparent red red;
  7.      }

边框图片

注意必须有边框的情况下才能使用边框图片属性

  1. border-image-source:url()引入边框图片路径
  2. border-image-slice：边框图片切多宽的边来填充边框 ，不能加单位，默认单位就是px，加单位是错误的
  3. border-image-width 图像边界的宽度 (加单位)
  4. border-image-outset 指定在边框在盒子外部绘制多长
  5. border-image-repeat 从中间向两端平铺，多余的会剪切，所以可以看到两端有不完整的图形
    stretch (默认值) 默认拉伸状态
    repeat 从中间向两端平铺，多余的会剪切，所以可以看到两端有不完整的图形
    round 铺满边框，图片会被拉伸或者缩小
    综合属性：border-image:border-image-source border-image-slice border-image-repeat

背景图片

  1. background-color:背景颜色
  2. background-image背景图片
    background-image:url()引入背景图片的路径
  3. background-position背景定位，针对设置背景图片的盒子
  4. background-repeat背景平铺(no-repeat不平铺,repeat平铺)
  5. background-attachment背景固定定位，针对浏览器窗口进行定位
    要添加多个背景图片的情况，最上面的图片放在第一个，其他依次往后
  6. background-size:背景图片的宽度 第二个值代表背景图片的高度
    取值：固定单位px
  7. 百分比是相对于设置背景图片的盒子的百分比
  8. cover：此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小
    等比例放大背景图片，知道背景图片完全覆盖盒子的宽高
  9. contain:此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小
    等比例放大图片，只要盒子能够包含整个图片就好

背景图片的填充

  1. background-origin改变背景图片开始填充的位置
  2. background-origin:content-box从内容区域开始填充
  3. background-origin:border-box 从边框处开始填充
  4. background-origin:padding-box从padding处开始填充 （默认）
  5. background-clip:设置背景图片剪切的位置
  6. background-clip:content-box从内容区域开始剪切
  7. background-clip:border-box 从边框处开始剪切
  8. background-clip:padding-box从padding处开始剪切