< meta charset = " UTF-8 " > < meta http-equiv = " X-UA-Compatible " content = " IE=edge " > < meta name = " viewport " content = " width=device-width, initial-scale=1.0 " > < title > Document </ title > < style > .image img { width : 300px ; margin : 50px 0 50px 50px ; /* 边框 */ .image .border { border : 1px solid #333 ; /* 阴影作用于整张图片外轮廓 */ .image .box-shadow { box-shadow : 8px 8px 10px #333 /* 阴影作用于图片不透明内容 */ .image .drop-shadow { -webkit-filter : drop-shadow ( 8px 8px 6px #333 ) ; filter : drop-shadow ( 8px 8px 6px #333 ) ; .triangle { display : flex ; .triangle div { width : 0 ; border-top : 200px solid ; border-left : 200px solid ; border-color : transparent transparent transparent rgb ( 243 , 195 , 207 ) ; margin : 50px 0 50px 50px ; /* 阴影作用于整个形状外轮廓 */ .triangle .box-shadow { box-shadow : 8px 8px 10px #333 ; /* 阴影作用于形状不透明内容 */ .triangle .drop-shadow { -webkit-filter : drop-shadow ( 8px 8px 6px #333 ) ; filter : drop-shadow ( 8px 8px 6px #333 ) ; </ style > </ head > < div class = " image " > < img class = " border " src = " ./vip-card.png " alt = " " > < img class = " box-shadow " src = " ./vip-card.png " alt = " " > < img class = " drop-shadow " src = " ./vip-card.png " alt = " " > </ div > < div class = " triangle " > < div class = " box-shadow " > </ div > < div class = " drop-shadow " > </ div > </ div > </ body > </ html > 本章我们主要来说一下【 drop - shadow 】和【box- shadow 】的区别。 box- shadow 和 drop - shadow 从功能上来都是给 元素 加阴影。从写法上来说，看起来很相似。 // box- shadow box- shadow : x(水平位置), y(垂直位置), blur... css3 中 新增两种阴影，分别是box- shadow &text- shadow 。从字面上意思即盒子阴影和文本阴影，本文主要内容简单的介绍一下阴影的使用。 一、box- shadow W3school 中 的语法为： box- shadow : h- shadow v- shadow blur spread color inset; h- shadow :水平阴影的位置，必选，允许为负 v-s... filter: drop - shadow 滤镜 要使用标准的 css3 实现某 元素 的 投影 效果，有两个方法，第一个就是使用常见的 box- shadow ，第二个就是使用 css3 的 filter 阴影滤镜 drop - shadow 。 filter 中 的 drop - shadow 与 box- shadow 有同样的参数值，但表现效果有差异 drop - shadow （ 图片 内容轮廓阴影） box- shadow ( 图片 边框阴影) 那就要用到 drop - shadow 啦~ drop - shadow 滤镜可以给 元素 或 图片 非 透明 区域 添加 投影 。 box- shadow : h- shadow v- shadow blur spread color inset; h-shado...