CSS3 常用样式

border-top-left-radius: 50px; /*表示半径为50px圆*/
border-top-left-radius: 50px 100px; /*表示水平半径为50px，垂直半径为100px的椭圆*/
border-radius: 5px; /*相当于 border-top/bottom-left/right-radius: 5px 5px;*/
border-radius: 5px 10px; /*上下、左右 border-top-left/bottom-right: 5px; border-top-right/bottom-left: 10px;*/
border-radius: 5px 10px 15px; /*上、左右、下 border-top-left: 5px; border-top-right/bottom-left: 10px; border-bottom-right: 15px;*/
border-radius: 5px 10px 15px 20px; /*上、右、下、左 border-top-left: 5px; border-top-right: 10px; border-bottom-right: 15px; border-bottom-left: 20px;*/
border-radius: 5px / 5px; /*水平半径和垂直半径相等，故为圆*/
border-radius: 5px / 5px 10px; /*左上角和右下角水平半径和垂直半径为5px的圆，右上角和左下角水平半径为5px，垂直半径为10px的椭圆*/
border-radius: 5px / 5px 10px 15px; /*左上角半径为5px的圆，右上角和左下角水平半径为5px，垂直半径为10px的椭圆，右下角水平半径为5px，垂直半径为15px的椭圆*/
border-radius: 5px / 5px 10px 15px 20px; /*左上角半径为5px的圆，右上角水平半径为5px，垂直半径为10px的椭圆，右下角水平半径为5px，垂直半径为15px的椭圆故为圆，左下角水平半径为5px，垂直半径为20px的椭圆*/
border-radius: 50%; /*表示半径为当前盒子的宽度/高度的50%，超过50%以50%来呈现*/

#rcorners-test {
        border-top-left-radius: 150px 75px;
        /* border-top-right-radius: 100px 75px; */
        border: 2px solid #8ac007;
        width: 200px;
        height: 150px;
      }

#rcorners2 {
        border-radius: 50%;
        border: 2px solid red;
        padding: 20px;
        width: 200px;
        height: 150px;
      }

#rcorners3 {
        border-radius: 50% / 20%;
        border: 2px solid red;
        width: 200px;
        height: 150px;
      }

hsl(<length>, <percentage>, <percentage>)
/*length 表示色调（Hue）。Hue衍生于色盘，取值可以为任意数值，其中0（或360，或-360）表示红色，60表示黄色，120表示绿色，180表示青色，240表示蓝色，300表示洋红，当然可以设置其他数值来确定不同的颜色。*/
/*percentage表示饱和度（Saturation），表示该色彩被使用了多少，即颜色的深浅程度和鲜亮程度。取值为0%到100%之间的值，其中0%表示灰度，即没有使用该颜色；100%的饱和度最高，即颜色最鲜亮。*/
/*percentage表示亮度（Lightness）。取值为0%到100%之间的值，其中0%最暗，显示为黑色，50%表示均值，100%最亮，显示为白色。*/

width: calc(100% - 80px);

body {
    --foo: #7F583F;
    --bar: #F7EFD2;
}
/* foo 与 bar是变量名称 他们的值分别是 #7F583F 和 #f7EFD2*/

a {
    --foo：#f1f2f5;
    --bar: red;
    color: var(--foo);
    text-decoration-color: var(--bar);
}

var(--font-stack, "Roboto", "Helvetica");
var(--pad, 10px 15px 20px);

html {
  --primary-color: red;
  --logo-text: var(--primary-color);
  /* 无效 */
  var(--primary-color): green;
}

html {
  --color: blue;
}
div {
  --color: green;
}
#alert {
  --color: red;
}
* {
  color: var(--color);
}

<p>我的颜色为 blue</p>
<div>我的颜色为 green</div>
<div id="alert">我的颜色为 red</div>

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
background-image: radial-gradient(shape size at position, start-color, ..., last-color);

background-image: linear-gradient(red, yellow);

background-image: linear-gradient(to right, red, yellow);

background-image: linear-gradient(to bottom right, red, yellow);

background-image: linear-gradient(-90deg, red, yellow);

/*彩虹色*/
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);

background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));

background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
/*red ---> yellow 占父盒子的10%，yellow ----> green 从10%渐变到20%*/
/*默认是从上到下，每一份渐变占20%，父盒子里面会重复出现5次*/

background-image: radial-gradient(red, yellow, green);

background-image: radial-gradient(red 5%, yellow 15%, green 60%);

background-image: radial-gradient(circle, red, yellow, green);
/*默认为椭圆 ellipse*/

background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();