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);
  • 渐变练习



    
    Title
    


IG加油加油!

你可能感兴趣的:(16-CSS边框圆角和渐变)