border-radius:设置边框的圆角

  1. border-radius的值最大为宽或高中最小值的一半
  • 一个取值：上下左右
  • 两个取值：左上角和右下角 左下角和右上角
  • 三个取值：左上角 左下角和右上角 右下角
  • 四个取值：左上角 右上角 右下角 左下角
  1. 想设置圆形，只需要给元素一样的宽高，然后设置border-radius：50%拥有四个属性值：
  2. 想设置椭圆形:宽高不一致，设置border-radius：50%或者设置border-radius：宽度一半/高度一半

border-image设置边框图片

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

background设置背景图片

  • background-color:背景颜色
  • background-image背景图片
  • background-position背景定位，针对设置背景图片的盒子
  • background-repeat背景平铺
  • background-attachment背景固定定位，针对浏览器窗口进行定位

background-size:

第一个值：背景图片的宽度；第二个值背景图片的高度

  • 取值：1.固定单位px 2.百分比是相对于设置背景图片的盒子的百分比
  • cover：此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小
  • contain:此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小

等比例放大图片，只要盒子能够包含整个图片就好

background-origin改变背景图片开始填充的位置

  • content-box从内容区域开始填充
  • border-box 从边框处开始填充
  • padding-box从padding处开始填充 （默认）

background-clip设置背景图片剪切的位置

  • content-box从内容区域开始剪切
  • border-box 从边框处开始剪切
  • padding-box从padding处开始剪切