css使用box-shadow阴影属性绘制彩虹

今天没有太阳，画个小彩虹，来给自己和生活打个气！
主要使用了CSS里面box-shadow的属性，来自这个博客，写的不错

https://blog.csdn.net/miss_zxm/article/details/85236992

代码：

html:
<view class="box-shadow-test"></view>css:
.box-shadow-test {height: 100px;width: 100px;margin: 100px auto;transform: rotate(45deg);border-radius: 100px 0 0 0;box-shadow:/*参数依次为：颜色、水平阴影位置、垂直阴影位置、模糊距离、阴影大小*/#f44336 -2px -2px 0 1px, #ff9800 -4px -4px 0 3px,#ffeb3b -6px -6px 0 5px, #8bc34a -8px -8px 0 7px, #00bcd4 -10px -10px 0 9px,#2196f3 -12px -12px 0 11px,#9c27b0 -14px -14px 0 13px;
}

小彩虹~，希望见到的宝贝们天天好心情！

css使用box-shadow阴影属性绘制彩虹相关推荐

Shadow属性和【CSS3 Box Shadow(阴影)效果在线调试工具】
Shadow属性示例向内/向外 | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 inset 阴影向内 (默认向外) /* x偏移量 | y偏移量 | 阴影颜色 */ b ...
Box Shadow(阴影)-Css3写法示例
Box Shadow(阴影)-Css3演示 -moz-box-shadow:2px 2px 5px #333333; -webkit-box-shadow:2px 2px 5px #333333; b ...
Box Shadow阴影和圆角
一.盒子写Box Shadow阴影:如 box-shadow:2px 2px 5px #120F0B; //支持Opera浏览器 -moz-box-shadow:2px 2px 5px #120F0B ...
shadow阴影属性
前缀实例说明 -ms- -ma-box-shadow Ie浏览器专属CSS属性添加-ms- -moz- -moz-box-shadow 所有基于Gecko引擎(Firfox)专属css属性添加-m ...
CSS中BOX模型的属性有,在CSS中，下面不属于BOX模型属性的有（）。
摘要: 密技与对钥加比称密术相,下面密技钥加称密非对术(.模型属性... 密技与对钥加比称密术相,下面密技钥加称密非对术(. 化最年该重变民人均消大的出比费支省居是(,不属人口该省占4城镇,不属个消在 ...
HTML水平阴影什么意思,css3阴影属性box-shadow注意事项
css3阴影属性box-shadow注意事项 2010-03-08 eNet&Ciweek css3阴影属性box-shadow的一些注意点: box-shadow:阴影水平偏移值(可取正负值 ...
CSS3 Box Shadow
语法: box-shadow:1px 2px 3px #FFF; box-shadow:阴影水平偏移值(可取正负值): 阴影垂直偏移值(可取正负值):阴影模糊值:阴影颜色: 兼容性 Firefox支持 ...
css阴影属性_第三场阴影场与属性访问器接口
css阴影属性这是" 影子字段与属性访问器"界面的第3轮 . 如果您是新手,但不确定要怎么做,请查看我以前的文章或关于开发JavaFX应用程序时节省内存的第一篇文章 . 作为J ...
CSS Box Shadow Bottom Only [复制]
本文翻译自:CSS Box Shadow Bottom Only [duplicate] This question already has an answer here: 这个问题在这里已有答案: ...

css使用box-shadow阴影属性绘制彩虹

css使用box-shadow阴影属性绘制彩虹相关推荐

最新文章

热门文章