HTML5系列代码:径向渐变的背景圆

    技术2023-11-30  97

    gradient = linear-gradient() | repeating-linear-gradient() | radial-gradient() | repeating-radial-gradient()gradient允许使用简单的语法实现颜色渐变,以便UA在渲染页面自动生成图像。渐变在一个拥有尺寸的盒子中被生成,被称之为渐变盒,但是渐变本身并没有内在的尺寸,也就说如果在一个没有尺寸的容器上定义渐变,将无法被呈现。gradient可以应用在所有接受图像的属性上 <!DOCTYPEHTML> <html> <head> <meta charset="utf-8"> <title>径向渐变</title> <style type="text/css"> div { width:400px; height:200px; background-color:#F90; /* 基于Webkit内核的实现 */ background:-webkit-gradient(radial,200 100,10,200 100, 100, from(#f90),to(#0f0),color-stop(50%,blue)); /* 基于Gecko内核的实现 */ background:-moz-radial-gradient(200px 100px,circle,#f90 10px,blue,#0f0 100px); } </style> </head> <body> <div></div> </body> </html>
    Processed: 0.012, SQL: 9