《CSS3实战》条记(2)

日期：2021-04-13 栏目：程序人生浏览：次

演示结果：

这里写图片描写

/*同心圆，在内圆到外圆中间90%的位置，即间隔外环内添加一个蓝色色标，设计多层径向渐变，如下图所示。*/ background: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(red), to(green), color-stop(90%, blue));

演示结果：

这里写图片描写

/*通过配置to()函数的颜色值为透明，可以设计发散的圆形结果*/ background: -webkit-gradient(radial, 200 100, 10, 200 100, 90, from(red), to(rgba(1,159,98,0)));

演示结果：

这里写图片描写

/*通过配置to（）函数的颜色值为透明，同时设计相似色，可以设计球形结果*/ background: -webkit-gradient(radial, 180 80, 10, 200 100, 90, from(#00C), to(rgba(1,159,98,0)), color-stop(98%, #0CF));

演示结果：

这里写图片描写

/*通过为配景图界说多个径向渐变，可以设计多个气泡结果，如下图所示*/ background: -webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)), -webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)), -webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)), -webkit-gradient(radial, 300 110, 10, 300 100, 100, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700)); -webkit-background-origin: padding-box; -webkit-background-clip: content-box;

演示结果：

这里写图片描写

渐变应用界说渐变结果的边框

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Webkit引擎的渐变实现要领</title> <style type="text/css"> div { border-width: 20px; width: 400px; height: 200px; margin: 20px; -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 20; } </style> </head> <body> <div></div> </body> </html>

演示结果：

这里写图片描写

界说填充内容结果

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Webkit引擎的渐变实现要领</title> <style type="text/css"> .div1 { width:400px; height:200px; border:10px solid #A7D30C; background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)); float:left; } .div1::before { width:400px; height:200px; border:10px solid #019F62; content: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(#A7D30C), to(rgba(1, 159, 98, 0)), color-stop(90%, #019F62)); display: block; } </style> </head> <body> <div>透视框</div> </body> </html>

显示结果：

这里写图片描写

界说列表图标

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Webkit引擎的渐变实现要领</title> <style type="text/css"> ul { list-style-image: -webkit-gradient(radial, center center, 4, center center, 8, from(#ff0000), to(rgba(0, 0, 0, 0)), color-stop(90%, #dd0000)) } </style> </head> <body> <ul> <li>新闻列表项1</li> <li>新闻列表项2</li> <li>新闻列表项3</li> <li>新闻列表项4</li> </ul> </body> </html>

演示结果：

这里写图片描写

您大概感乐趣的文章:

转载注明出处：https://www.heiqu.com/wsdppy.html

《CSS3实战》条记(2)

相关推荐