卫浴十大品牌排行-庭院花坛设计图片大全
2023年4月23日发(作者：家装水电施工工艺规范标准)
html5+css搭建⼀个⽹页创意画框效果案例演⽰
⼀、效果分析：
根据⽰意图分析结构以及需求
结构：两个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("") 22%/40px round; /**/ 添加图⽚边框，分割线，宽度，平铺样式 box-shadow: 3px 5px 10px 2px #999; /**/ 设置阴影效果 } .box2{ width: 100%; height: 100%; /* ⾃适应外部盒⼦的⼤⼩， */ 这⾥也可以设置外部盒⼦的像素值 background: url("") center center no-repeat; /**/ 引⼊图⽚，设置⽔平与垂直位置为居中，不平铺 opacity: 0.5; /**/ 设置透明度 } style> head> <body> <div class="box1"> <div class="box2"> div> div> body> html> 使⽤浏览器预览效果
专业除甲醛公司怎么收费-智能家居发展现状和未来发展
更多推荐
画框图片大全
发布评论