CSS前端开发效果实例收集

0基础入门web前端开发|div css 前端页面开发|网站前端开发

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
<metacharset=”UTF-8″>
<title>前端开发入门效果分享</title>
<style>
body{
font-family:Arial;
font-size:20px;
}
body,
ul{
padding:0;
margin:0;
}
ul{
list-style:none;
}
.wrap{
width:70%;
height:200px;
text-align:center;
margin:50pxauto;
background:#fff;
}
.wraph1{
font-size:25px;
line-height:200px;
}
.effect{
box-shadow:0px1px4pxrgba(0,0,0,.2),0040pxrgba(0,0,0,.1)inset;
position:relative;
}
.effect:before,
.effect:after{
content:”;
background:#fff;
position:absolute;
top:50%;
bottom:0;
left:30px;
right:30px;
box-shadow:0030pxrgba(0,0,0,.8);
border-radius:100px/10px;
z-index:-1;
}
.box{
width:980px;
height:auto;
margin:20pxauto;
}
.boxli{
width:300px;
height:210px;
float:left;
border:2pxsolid#efefef;
margin-right:20px;
background:#fff;
position:relative;
box-shadow:0px1px4pxrgba(0,0,0,.2),0040pxrgba(0,0,0,.1)inset;
}
.boxliimg{
display:block;
width:290px;
height:200px;
margin:5px;
}
.boxli:before{
content:”;
position:absolute;
width:90%;
height:80%;
left:20px;
bottom:8px;
background:transparent;
box-shadow:08px20pxrgba(0,0,0,.6);
transform:skew(-12deg)rotate(-4deg);
z-index:-1;
}
.boxli:after{
content:”;
position:absolute;
width:90%;
height:80%;
left:20px;
bottom:8px;
background:transparent;
box-shadow:08px20pxrgba(0,0,0,.6);
transform:skew(11deg)rotate(4deg)translateX(-8px);
z-index:-2;
}
</style>
</head>
<body>
<divclass=”wrap effect”>
<h1>曲线阴影</h1>
</div>
<ulclass=”box”>
<h2>翘边阴影:</h2>
<li>
<imgsrc=”images/photo1.jpg”>
</li>
<li>
<imgsrc=”images/photo2.jpg”>
</li>
<li>
<imgsrc=”images/photo3.jpg”>
</li>
</ul>
</body>
</html>

利用重复指定box-shadow来达到多个边框的效果
html 代码

<html>
<head>
<title>web前端开发初级入门</title>
<style>
div{
box-shadow:0006pxrgba(0,0,0,0.2),00012pxrgba(0,0,0,0.2),00018pxrgba(0,0,0,0.2),00024pxrgba(0,0,0,0.2);
height:200px;
margin:50pxauto;
width:400px
}
</style>
</head>
<body>
<div></div>
</body>
</html>
前端开发的页面|前端设计html与css开发|前端开发css文件模板下载
» 本文来自:前端开发者 » 《CSS前端开发效果实例收集》
» 本文链接地址:https://www.rokub.com/3718.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!