CSS3属性详解

网络上已经有许多关于css3样式的介绍以及功能使用，而本文的目的是为了列出所有css3属性在一个页面进行展示，方便查阅。若有文章中未说到的css3样式请各位大佬不吝赐教

漂亮是需要付出一点点代价的，那就是CSS3不支持IE8 -，心疼IE

CSS3圆角（border-radius）

我比较喜欢看图能够描述的清楚，不解释直接上代码

border-radius: 10px;
border-radius: 1000px;
border-radius: 50%;
border-left-top-radius: 10px;
border-right-top-radius: 10px;
border-left-bottom-radius: 10px;
border-right-bottom-radius: 10px;

当然，border-radius所能做到的东西还不止上边这些

border-radius: 10% 70% 10%;
border-radius: 70% 70% 10%;
border-radius: 400% 120% 70% 70%;

它还可以创造出一些其它的形状，比如柠檬、标签、扇形，可以看得出这是个非常实用的属性。
此处有一个不错的CSS3有关于border-radius的一个 移动的大象demo 供参考，我也不知道让不让转载，先转就完事儿了~

------------------------------------2019.12.25---------------------------------------

CSS3边框阴影（box-shadow）

老样子，不解释直接上代码

box-shadow: 0px 0px 10px #ff0000;
box-shadow: 0px 0px 10px 10px #ff0000;
box-shadow: 5px 5px 0px #ff0000;
box-shadow: 5px 5px 0px rgba(200, 200, 200, .5);
box-shadow: 5px 5px 0px rgba(200, 200, 200, .5) inset;

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color

spread-radius(阴影扩散程度)	color (颜色值)
可省略，默认值为0	目前支持rgb/hex/hls

box-shadow属性完成标签阴影效果，让前端所表现出来的效果更佳丰富，看得出box-shadow属性也是一个非常实用的属性。
大部分CSS3样式还有一个隐藏功能，对于box-shadow来说，它可以做阴影的叠加，像是这样

box-shadow: 0px 0px 1px 1px #000000, 0px 0px 10px #000000 inset;

很棒。

不过，box-shadow只能做到根据标签的形状展现。上图对于box-shadow来说是什么没有办法，不过不用担心，问题总会解决的，只要我们技术过硬~

------------------------------------2019.12.26---------------------------------------

好久没有更新过了，年前因为个人原因并没有跟进，只有现在来继续之前未更新的文档（捂脸），没想到疫情来的如此突然，以前还想着有上那么几天在家待到嗨，没想到梦想成真了（泪笑）。祝愿武汉早日攻克难关，加油武汉！

CSS3滤镜filter（drop-shadow）

box-shadow不同的地方在于，box-shadow是对 当前元素 进行阴影效果的叠加，drop-shadow是通过filter属性对 当前元素中未透明的形状 添加阴影滤镜，如图所示

可以看得出来，两者的区别，当然，drop虽说好用，不过兼容性对于IE不够友好，全军覆没！所以，如果你需要支持IE时，请不要使用drop-shadow

------------------------------------2020.02.06---------------------------------------

持续更新

本文创作之前，深受 张鑫旭以及 w3cplus 网站的启发所写，在此放上两位的链接