纯HTML+CSS实战之制作相框效果

最新推荐文章于 2021-06-09 18:27:11 发布

小韩同学哇

最新推荐文章于 2021-06-09 18:27:11 发布

阅读量7.9k

点赞数 1

分类专栏：从零玩转Html5前端开发

本文链接：https://blog.csdn.net/qq_41886761/article/details/86572714

版权

效果如图所示

主要运用了盒子阴影，图片阴影，边框属性三个要点

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯css制作相框效果</title>
    <style>
        body{
            background-color: #999999;
        }
        img.xk{
            position: absolute;
            background-color: black;
            width: 300px;
            height: 200px;
            border: 6px solid white;
            box-shadow: 1px 1px 5px #333333;
        }
        div{
            position: absolute;
            left: 50px;
            top: 300px;
            text-align: center;
            font-size: 15px;
            padding: 10px;
            border: 1px solid #990;
            background-color: white;
            box-shadow: 1px 1px 5px #333333;
            width: 200px;

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小韩同学哇

关注关注

1
点赞
踩
16

收藏

觉得还不错? 一键收藏
1
评论
纯HTML+CSS实战之制作相框效果

效果如图所示主要运用了盒子阴影，图片阴影，边框属性三个要点代码如下： &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;纯css制作相框效果&lt;/title&gt; &lt
复制链接

扫一扫