<style> /*线性渐变*/ div{ width: 300px; height: 300px; /*添加渐变：渐变不是一个单一钩，它产生的是图像，所以需要使用background*/ /*linear-gradient(方向，开始颜色 位置，颜色2 位置，颜色3 位置...);*/ /*方向： to top:0deg to right:90deg to bottom:180deg --默认值 to left:270deg*/ /*background: linear-gradient(to right,red,blue)*/; background: linear-gradient(to right,red 0%,red 50%,blue 50%,blue 100%); }
/*径向渐变*/ div{ width: 300px; height: 200px; /*添加径向渐变：产生也是图像*/ /*background: radial-gradient(red,blue);*/ /*语法：radial-gradient(形状 大小 坐标,颜色1，颜色2...)：
形状shape: circle:产生正方形的渐变色 ellipse:适配当前的形状,如果是正方形的容器，两者效果一样.如果宽高不一样，默认效果切换到ellipse
at position:坐标，默认在正中心。 可以赋值坐标（参照元素的左上角），也可以赋值关键字(left center right top bottom) 大小size: closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。默认是最远的角farthest-corner*/
/*background: radial-gradient(circle,red,blue);*/ /*background: radial-gradient(circle farthest-side at 50px 50px,red,blue);*/ /*background: radial-gradient(at left top,red,blue);*/
/*设置颜色的位置*/ background: radial-gradient(red,red 50%,blue 50%,blue); }
/*重复渐变*/ body{ background-color: #ccc; } div:first-of-type{ width: 300px; height: 300px; /*background: radial-gradient( #fff 0%,#fff 10%, #000 10%,#000 20%, #fff 20%,#fff 30%, #000 30%,#000 40%);*/ background: repeating-radial-gradient(circle closest-side at center center, #fff 0%,#fff 10%, #000 10%,#000 20%); } div:last-of-type{ width: 200px; height: 800px; background: repeating-linear-gradient(45deg, #fff 0%,#fff 10%, #000 10%,#000 20%); } </style></head><body><div></div><div></div>
原文地址：https://www.cnblogs.com/lujieting/p/10182567.html
时间： 2024-11-03 05:41:55