使用css实现字匾边框的效果

实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        .box-handwriting {
            padding: 20px 80px;
            width: 640px;
            height:245px;
            border: 15px outset #973C13;
            margin: 40px auto 0;
            background: #aaa519;
        }

        .box-handwriting img {
            border: 2px solid #bababa;
        }
    </style>
</head>
<body>
<div class="box-handwriting">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521269450718&di=0e8b7db5918e4c8eb5fe1371ab7d5b54&imgtype=0&src=http%3A%2F%2Fwww.sh1122.com%2Fupimg%2F2014%2F0901%2F5889_0_1409559616.jpg"
         alt="字匾相框" title="字匾相框" width="640" height="245" />
</div>
</body>
</html>

实现效果图:



猜你喜欢

转载自blog.csdn.net/uuihoo/article/details/79590819