css进阶

1.径向渐变背景

background: radial-gradient(200px at right top, transparent 50%, #fff 50%);

• radial-gradient: 指定创建一个径向渐变。
• 200px: 设置了渐变的大小（直径）为200像素。这意味着渐变的圆形区域的直径为200px。
• at right top: 确定了渐变中心的位置在容器的右上角。
• transparent 50%, #fff 50%: 定义了渐变的颜色停止点。从中心开始，前50%是完全透明的，然后突然过渡到白色（#fff）。

整体效果是，在元素的右上角有一个圆形的透明到白色的径向渐变，这个圆形的直径为200px。这种技术常用于创造视觉焦点、模拟光晕效果或是作为设计元素的一部分来增加深度和层次感。

属性解析：transparent 50%, #fff 50%，从透明到纯白，且是突然变化，无虚化过渡效果。transparent 60%, #fff 40%，前者大于后者，实心区域大小变化；transparent 40%, #fff 60%，后者大于前者，边缘虚化过渡。