16-CSS边框圆角和渐变

边框圆角属性

• 设置边框圆角属性的格式
  • 第一个参数是水平方向, 第二个参数是垂直方向
    会以水平方向和垂直方向相交的地方作为圆心, 开始画圆
    border-top-left-radius: 设置左上角
    border-top-right-radius: 设置右上角
    border-bottom-left-radius: 设置左下角
    border-top-right-radius: 设置有下角

  注意点:
  如果只给了一个值, 那么水平方向和垂直方向相等

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

  • border-radius:
    第一个参数代表左上角
    第二个参数代表右上角
    第三个参数代表右下角
    第四个参数代表左下角

    注意点:
    如果省略了一个参数, 那么就等于对角
    如果只传递了一个参数, 那么四个角一样
    技巧:
    如果以后在企业开发中, 想画圆, 那么只需要设置圆角等于宽度的一半即可

  border-radius: 50%;
  border-radius: 100px,100px,100px,100px;
  

绘制椭圆

• 绘制椭圆水平方向为盒子宽度的一半,垂直方向为盒子高度的一半

绘制半圆

• 盒子两个角水平和垂直方向为宽度的一半.盒子高度为宽度的一半即可

绘制圆环

• border-radius的大小如果小于border的大小, 那么内边框是直角
• border-radius的大小如果大于border的大小, 那么内边框是圆角

---

线性渐变

• 1.默认情况下, 线性渐变是从上至下的渐变的
  2.可以通过在所有颜色的最前面添加to XXX的方式, 来指定往哪个方向渐变
  3.还可以通过在所有颜色的最前面添加一个度数的方式, 来指定往哪个方向渐变

background: linear-gradient(to left,yellow,red,rebeccapurple);
background: linear-gradient(45deg,green,red,blue);

• 可以在每一个颜色后面添加一个单位
  如果是第一个颜色: 那么代表着指定单位的区域不渐变
  如果是第二个颜色: 那么代表从第一个颜色指定的位置开始渐变, 渐变到第二个颜色指定的位置,后面剩余的全部纯色

background: linear-gradient(to right, red 100px,green 150px, yellow 200px);

径向渐变

• 1.默认情况下径向渐变会从盒子的中心点开始向四周扩散
• 2.我们可以通过在所有颜色前面加上 at 方向,指定渐变的中心
• 3.除了可以通过关键字指定方向以外, 还可以直接指定像素
• 4.我们可以通过在所有颜色前面加上像素来指定扩散的范围
• 5.如果需要同时指定开始扩散的位置和扩散的范围, 那么将范围写在前面

background: radial-gradient(red,rebeccapurple);
指定渐变中心点
background: radial-gradient(at top left,green, rebeccapurple);
渐变中心点接收像素
background: radial-gradient(at 100px 100px,green,yellow);
background: radial-gradient(100px,greenyellow,blue);
同时指定渐变范围和渐变中心位置
background: radial-gradient(200px at top left,green,mediumpurple);

• 渐变练习

    
    
    


IG加油加油!