gpt4 book ai didi

html - 图像阴影 css3

转载 作者:太空宇宙 更新时间:2023-11-04 04:31:10 24 4
gpt4 key购买 nike

enter image description here

这是我网站草图的顶部,我是在 HTML 编辑器中完成的。

我们可以在图像中看到的圆圈是我的 Logo ,它是具有 alpha 颜色背景的图像。
阴影、边框等即使在 IE 中也能完美运行。

现在我正在尝试使用 HTML5 和 CSS3 做一些类似的事情,但是我在图像阴影和边框方面遇到了很多问题。

box-shadow 不起作用,因为它是方形图像(记住它是具有 alpha 颜色背景的图像)
我为图像阴影找到的最后一件事是 filter: drop-shadow。理论上它应该适用于所有浏览器,但它只适用于 chrome。

另一方面,我无法得到像图片上那样的边框。如您所知,我的 Logo 是一个带有 alpha 颜色背景的图像,并且它总是有一个方形边框。

谁能帮帮我。我会很感激。谢谢


在使用了 Lloan Alas 给我的解决方案后,它工作得很好,但在手机上却不行
我使用海豚浏览器,这是我得到的:
mobil phone

这是我的代码:css:
#标识 { 边距顶部:-100px; 高度:188px; 宽度:300px; 背景图片:url("../imagenes/logo.png"); 边框:5px 纯白色; 边界半径:50%; 盒子阴影:0 10px 15px #000; -moz-box-shadow: 0 10px 15px #000; -webkit-box-shadow: 0 10px 15px #000; -ms-box-shadow: 0 10px 15px #000; -o-box-shadow: 0 10px 15px #000; -khtml-box-shadow: 0 10px 15px #000;

html:

最佳答案

这是一个现场演示 - 如果有帮助,请告诉我! LIVE DEMO JSBIN

兼容 IE 9-10、Firefox、Safari 和 Opera。 (据说)

关于html - 图像阴影 css3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17260222/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com