一、效果分析：
根据示意图分析结构以及需求
结构：两个div盒子嵌套，并使用css设置背景填充内容
样式：在外层div盒子中设置红蓝色的线性渐变，从左到右，并设置透明度。在内层盒子中导入背景图片。
二、搭建结构：
1.打开Dreamweaver新建一个html5文件，并设置title
2.使用html搭建整体建构，为方便区分，我们将两个盒子设置类名
3.使用嵌入式css引入效果，具体代码与注释如下：
<head>
<meta charset="UTF-8">
<title>创意画框</title>
<style>
.box1{
width: 700px;
height: 420px;
background-image: linear-gradient
(90deg, #3d7ea5 50%, #ce4b4b 50%);
/*设置颜色背景，线性渐变，90degd等同于
'to right',添加颜色与比例*/
border-style: solid;/*添加一个边框*/
border-image: url("1.jpg") 22%/40px round;
/*添加图片边框，分割线，宽度，平铺样式*/
box-shadow: 3px 5px 10px 2px #999;
/*设置阴影效果*/
}
.box2{
width: 100%;
height: 100%;
/*自适应外部盒子的大小，
这里也可以设置外部盒子的像素值*/
background:
url("zuqiu.png") center center no-repeat;
/*引入图片，设置水平与垂直位置为居中，不平铺*/
opacity: 0.5;
/*设置透明度*/
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
</div>
</div>
</body>
</html>
使用浏览器预览效果
8905
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
