马黑黑 发表于 2024-8-2 19:41
本帖最后由 马黑黑 于 2024-8-2 19:42 编辑
<style>
.rc1 {
这样的更漂亮，不是硬过度，特别好看。
红影 发表于 2024-8-2 21:09
这样的更漂亮，不是硬过度，特别好看。
其实都好看
绿叶清舟 发表于 2024-8-2 20:03
点点关注不迷路
{:4_181:}
马黑黑 发表于 2024-8-2 21:28
交了个作业了，今天任务完成了
绿叶清舟 发表于 2024-8-2 21:59
交了个作业了，今天任务完成了
厉害
马黑黑 发表于 2024-8-2 21:28
其实都好看
我更喜欢这样渐变的效果{:4_187:}
红影 发表于 2024-8-2 22:21
我更喜欢这样渐变的效果
啊，不要有偏见
马黑黑 发表于 2024-8-2 22:22
啊，不要有偏见
好吧，其实在不同的场合有不同的运用{:4_173:}
红影 发表于 2024-8-2 22:36
好吧，其实在不同的场合有不同的运用
对的
本帖最后由 马黑黑 于 2024-8-4 08:03 编辑 <br /><br /><style>
.artbox { position: relative;margin: }
.artbox > p { position: relative; margin: 10px 0; font: normal 18px / 26px sans-serif; }
.artbox mark { color: black; background: lightblue; padding: 2px 4px; }
.textRed { color: red; }
.showDiv { position: relative; }
</style>
<div class="artbox">
<h2 class="textMid">第十四讲：CSS阴影</h2>
<p>给HTML元素添加阴影，一般会先想到CSS属性 <span class="textRed">box-shadow</span>，它最经典的用法如下：</p>
<div class="hE"><pre id="pre1">
<style>
.ybox1 {
width: 300px;
height: 100px;
box-shadow: 2px 4px 6px gray;
}
</style>
<div class="ybox1"></div>
</pre></div>
<p><button id="btn1" type="button" value="1">点击查看效果</button></p>
<div id="sbox1" class="showDiv"></div>
<p>第5行代码就是 box-shadow 属性值，属性值中，第一、二个参数是阴影在X、Y轴上的偏移距离，阴影的朝向，X偏移为负数时向左、正数时向右，Y偏移为负值是向上、正数是向下。第三个参数是阴影模糊半径，默认值0，不能为负数，值越大阴影越大、越淡。第四个参数是阴影颜色，支持浏览器支持的任何颜色表示法。</p>
<p>但是，box-shadow属性的参数不止这些，它还有另外两个可选参数，一是内阴影参数 <span class="textRed">inset</span>，可以放在所有参数的前面或后面，用空格与其他参数隔开；二是扩展半径，如果设置此值，必须放在模糊半径和阴影颜色之间。下面的实例，先给元素设置一个没有XY偏移量的内阴影，再设置一个也没有XY偏移量、没有模糊半径、只有1px扩展半径和颜色的外阴影——它充当元素的边框：</p>
<div class="hE"><pre id="pre2">
<style>
.ybox2 {
width: 300px;
height: 100px;
box-shadow: inset 0 0 50px skyblue, 0 0 0 1px blue;
}
</style>
<div class="ybox2"></div>
</pre></div>
<p><button id="btn2" type="button" value="2">点击查看效果</button></p>
<div id="sbox2" class="showDiv"></div>
<p>阴影可以无限多重，全放在 box-shadow 属性里，各组阴影表达语句之间用小角逗号隔开。</p>
<p>阴影可以和元素主体分离。下面的例子，外阴影完全跑到右边去了，内阴影则因为没有XY偏移量还在元素那里：</p>
<div class="hE"><pre id="pre3">
<style>
.ybox3 {
width: 300px;
height: 100px;
box-shadow: 320px 2px 6px gray, inset 0 0 6px 3px green;
}
</style>
<div class="ybox3"></div>
</pre></div>
<p><button id="btn3" type="button" value="3">点击查看效果</button></p>
<div id="sbox3" class="showDiv"></div>
<p>若即若离的阴影有妙用，比如绘制月牙：</p>
<div class="hE"><pre id="pre4">
<style>
.ybox4 {
width: 100px;
height: 100px;
box-shadow: 25px 10px 0 blue, 140px 10px 0 silver, 260px 10px gold;
border-radius: 50%;
}
</style>
<div class="ybox4"></div>
</pre></div>
<p><button id="btn4" type="button" value="4">点击查看效果</button></p>
<div id="sbox4" class="showDiv" style="margin-bottom: 20px"></div>
<p>蓝色的月牙是利用元素挡住阴影的一部分做出来的，换言之，阴影没有完全脱离元素；而其右边的银盘和金盘则脱离了元素，它们反映出元素原本的形状，只是颜色不同——主元素没有设置背景颜色。</p>
<p>box-shadow属性虽好，也有它无能为力的地方，比方说针对有透明的的图片，它无法渲染出透明的效果。因此，基于CSS滤镜 <span class="textRed">filter</span> 的 <span class="textRed">drop-shadow()</span> 函数应运而生，以弥补 box-shadow 的不足。试比较二者的代码和效果：</p>
<div class="hE"><pre id="pre5">
<style>
.mypic1 {
box-shadow: 200px 0 0 #fa64c7;
}
.mypic2 {
filter: drop-shadow(200px 0 0 #fa64c7);
}
</style>
<p><img class="mypic1" alt="" src="https://638183.freep.cn/638183/t23/btn/f5.png" /></p>
<p><img class="mypic2" alt="" src="https://638183.freep.cn/638183/t23/btn/f5.png" /></p>
</pre></div>
<p><button id="btn5" type="button" value="5">点击查看效果</button></p>
<div id="sbox5" class="showDiv"></div>
<p>可以明显看到，box-shadow属性的阴影只是一个矩形，图片的自然形状渲染不出来。而 filter 的 drop-shadow() 完美地呈现出图片的形状。drop-shadow() 也有局限：它只有阴影XY轴偏移量和模糊半径，没有内阴影、没有阴影扩展半径。</p>
<p>drop-shadow() 函数也支持多重阴影，语法规范和 box-shadow() 有所不同，它用空格隔开个语句。试比较：</p>
<div class="hE"><pre>
box-shadow: 25px 10px 0 blue, 140px 10px 0 silver; /* 用逗号隔开多组阴影语句 */
filter: drop-shadow(200px 0 0 pink) drop-shadow(400px 0 0 blue); /* 用空格隔开多组阴影语句 */
</pre></div>
<p>另外，filter滤镜的drop-shadow子滤镜由于投影性质的关系，它生成的下一个阴影都会将前面的阴影作为“克隆”的对象。本讲的作业就拿这个来做体验：给一个 img 标签加载一张有透明度的图片，并在CSS中制作 filter: drop-shadow() 阴影，要求最终的阴影结果是，与原始图片同一个水平方向的有3个阴影、图片下方4个阴影，也就是和图片一块，共有2行4列 2*4=8 个图案。提示：实际设计的阴影代码仅三组，两组针对水平方向，一组针对纵向方向。</p>
<p><a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=77307&extra=page%3D1">返回目录</a></p>
</div>
<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
var runCodes = (str,ele) => {
let reg = /(<script(.*?)>)(.|\n)*?(<\/script>)/g;
let js_str, html_str;
if(str.match(reg) !== null) {
js_str = str.match(reg);
html_str = str.replace(js_str, '').trim();
js_str = js_str.replace(/<[\/]{0,1}script[^>]*>/g,'').trim();
} else {
js_str = '';
html_str = str.trim();
}
ele.innerHTML = html_str;
let myfunc = new Function(js_str);
myfunc();
};
.forEach((btn,key) => {
var pres = ,
outs = ;
btn.onclick = () => {
runCodes(pres.innerText, outs);
btn.disabled = true;
}
});
</script>
阴影不仅可以让图片和贴子有立体效果，还可以克隆图片，并且改变颜色，这个功能更强大。。
想到之前老师说的贴子有很专业阴影设计，感觉这里的学问很多。。
马黑黑 发表于 2024-8-3 08:00
.artbox { position: relative;margin: }
.artbox > p { position: relative; margin: 10px 0; font:...
在写法上，box-shadow:直接后面跟着设计内容，filter: drop-shadow的内容要写在括号里，
多重阴影时，前者用逗号隔开，后者是空格隔开。
这两个放在一起讲可以有所比较，真好{:4_187:}
那个作业是在图片上加透明图片么？我试试。
<style>
#hy {
width: 600px;
height: 300px;
background: url('https://638183.freep.cn/638183/t24/webp/seas.webp') no-repeat center/cover;
position: relative;
}
.pic {
position: absolute;
width: 100px;
height: 100px;
filter: drop-shadow(150px 0 0 #fa64c7) drop-shadow(150px 0 0 #fa64c7) drop-shadow(150px 0 0 #fa64c7) drop-shadow(0px 150px 0 #fa64c7);
}
</style>
<div id="hy"><img class="pic" alt="" src="https://638183.freep.cn/638183/t23/btn/f5.png" /></div>
不知道是不是这样理解的作业。{:4_173:}
当阴影取的尺寸超出元素尺寸，可以脱离元素，成为独立的样子。这个还好理解。
那个月牙挺难理解，不取border-radius: 50%;时可以看到只是右下的投影，不知道为什么取个圆就有这样的效果。暂时没转过弯来。
这个作业有有趣，最后的一个设置等于把前面“克隆”的再一起克隆了{:4_173:}
红影 发表于 2024-8-3 16:37
不知道是不是这样理解的作业。
100√
南无月 发表于 2024-8-3 09:40
阴影不仅可以让图片和贴子有立体效果，还可以克隆图片，并且改变颜色，这个功能更强大。。
想到之前老师说 ...
{:4_181:}