<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS背景色径向渐变</title> <style> #grad1{ height: 150px; width: 200px; /* border-radius: 500px;*/ /* 这里不能设置圆角,长宽不一致效果没显示 */ background: -webkit-radial-gradient(red,yellow, green); background: -o-radial-gradient(red,yellow, green); background: -moz-radial-gradient(red,yellow, green); background: radial-gradient(Ellipse,red,yellow, green); /* circle 圆形 默认为椭圆 Ellipse */ }
#grad2{ height: 200px; width: 200px; border-radius: 200px; /*边框圆角 200px:指定圆角半径 最后显示为一个圆太阳 */ background: -webkit-radial-gradient(red,yellow, green); background: -o-radial-gradient(red,yellow, green); background: -moz-radial-gradient(red,yellow, green); background: radial-gradient(circle,red,yellow, green); /* circle 圆形 默认为椭圆 Ellipse */ }
</style></head><body><h3>径向渐变--颜色结点均匀分布(椭圆)</h3><div id="grad1"></div><p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p><br/><hr color="red">
<h3>径向渐变--颜色结点均匀分布(圆)</h3><div id="grad2"></div><p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p><br/></body></html>
原文地址：https://www.cnblogs.com/TanBeauty/p/10982476.html
时间： 2024-10-31 04:20:45