<style>
div{
width: 250px;
height: 250px;
border: 1px solid #000;
margin: 20px auto;
}
/*
径向渐变：
radial-gradient（辐射半径, 中心的位置，起始颜色，终止颜色）;
中心点位置：at left right center bottom top
*/
div:nth-child(1){
background-image: radial-gradient(at left top,yellow,green);
}
div:nth-child(2){
background-image: radial-gradient(at 50px 50px,yellow,green);
}
div:nth-child(3){
background-image: radial-gradient(100px at center,yellow ,green);
}
div:nth-child(4){
background-image: radial-gradient(100px at center,
yellow 0% ,
green 30%,
blue 60%,
red 100%);
}
div:nth-child(5){
background-image: radial-gradient(100px 50px at center,yellow ,green);
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
径向渐变
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 前言 你是否注意到，“渐变设计”已经成为了一种美的体验。无论是APP的icon，还是PPT的背景，渐变色都比纯色要...
- 1、inset是用来设置内阴影的 （box-shadow） 内阴影和外阴影方向是相反的 2、transition...
- 径向渐变(Radial gradients)由其中心点、边缘形状轮廓及位置、色值结束点（color stops）定...
- 原来还有个径向渐变，之前都是用的普通的轴向渐变[IOS图像处理（5）填充模式 - 幸福小弥 - 博客园](http...
