圆角样式与渐变样式

1. 圆角样式
   圆形设置
   border-radius: 左上 右上 右下 左下;
   左上 右上与左下 右下;
   左上与与右下 左下与右上;
   单例型写法：
   border-top-left-radius: 左上角小圆半径
   border-top-right-radius: 右上角小圆半径
   border-bottom-right-radius: 右下角小圆半径
   border-bottom-left-radius: 左下角小圆半径
   椭圆形设置
   border-radius 的属性值可分为两段,由一个反斜杠隔开
   反斜杠前面的值为横轴值,反斜杠后的为纵轴值,椭圆的写法与圆角类似,反斜杠前后皆为独立的,语法与简写都一样
   注意点
   ①那个位置的小圆角,浏览器只会隐藏巨星区域在哪个位置圆弧外的部分
   ②圆角半径<=元素宽度
   ③可以接受长度值,还可以接受百分比值
2. 渐变色
   线性渐变
   background-image: linear-gradient(颜色 0%, 颜色 100%)
   渐变方向
   background-image: linear-gradient(to right(或deg), 颜色 0%, 颜色 100%)
   径向渐变
   background-image: radial-gradient(颜色 0%, 颜色 100%)
   注意点
   渐变色用于背景时,是以背景图片显示的!!!
3. 重复渐变
   background-image:repeating-linear-gradent()
   background-image:repeating-radial-gradent()