如何创建只是轮廓的框阴影?

本文介绍了如何创建只是轮廓的框阴影?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何使用html和css创建类似上面的链接的内容?每当我尝试使其变成细线时(框阴影:10px 10px 1px#FFE600;)，它就会消失.我是否需要为此创建一个单独的div?

How would I be able to create something like the link above with html and css? Every time I try to make it into a thin line like (box-shadow: 10px 10px 1px #FFE600;) it disappears. Would I just need to create a separate div for this?

这是我的当前代码:HTML

Here's my curent code: HTML

<img src="../images/about.jpg" alt="Yonge and Dundas Street" class="pageimg">

CSS

.pageimg {
    width: 37%;
    float: right;
    margin-left: 100px;
    box-shadow: 10px 10px #FFE600;
}

推荐答案

使用多个箱形阴影:

img {
  box-shadow:
   12px 8px 0 0px white,
   14px 6px 0 0px yellow,
   14px 10px 0 0px yellow,
   10px 10px 0 0px yellow;
}

<img src="https://picsum.photos/200/200?image=1069">

这篇关于如何创建只是轮廓的框阴影?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！