wraparound实现立体标题栏横幅效果代码-html代码-BFW代码库

wraparound实现立体标题栏横幅效果代码

代码语言：html

代码描述：wraparound实现立体标题栏横幅效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>


<head>
    <meta charset="utf-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/wraparound.css">
    <style>
        body {
	font-family:Verdana,Geneva,Tahoma,sans-serif;
	color:#313131
}
p {
	line-height:1.5;
	letter-spacing:1px
}
h2 {
	height:3rem;
	font-weight:200
}
h3 {
	font-weight:200
}
section {
	background-color:#efefef;
	padding:1rem;
	margin-bottom:5rem
}
.content-wrapper {
	min-width:740px;
	margin:0 auto
}
.content {
	width:600px;
	margin:0 auto
}
.thick {
	height:50px
}
.thickest {
	height:80px
}
.blue {
	background-color:#5279c5;
	color:#f3efe1
}
.orange {
	height:2rem;
	color:#0a2458;
	background-color:#edbe87;
	margin-bottom:.5rem
}
.plastic {
	font-size:1rem;
	background-color:#ecf31ec0;
	color:#d44bdb;
	box-shadow:inset 0 calc(var(--diff-from-zero-level) * -10px) 2px 2px rgba(0,17,255,0.2)
}
.plastic::before,.plastic::after {
	background-color:#33d8e7;
	color:#dedede;
	filter:none
}

    </style>
</head>

<body>
    <div class="content-wrapper">
        <div class="content">
            <section>
                <h2 class="wraparound">Default,no styling</h2>
                <h3>Let Me Be Clear</h3>
                <p>Look,here's the deal. First of all, the fact of the matter is, and let me be clear — the fact of the matter is we need to be honest about this. Here's the deal. Period. No,it's not a joke. This may make some people mad. Period. But the
                    fact of the m — look. Here's the deal. That we know — that we <strong>know</strong>,period.</p>
                <p>And I know — and if other people are,I'm gonna — look, the truth is, look, here's the matter,look,our current situation is why I'm here. .........完整代码请登录后点击上方下载按钮下载查看