html带标题的边界,CSS3 H1标题透明开口的边界样式

CSS

语言：

CSSSCSS

确定

* {

box-sizing: border-box;

color: #333;

}

body {

font-family: "PT Sans";

background-color: #ddd;

}

.section {

position: relative;

width: 900px;

max-width: 80%;

border: 2px solid #333;

border-top: none;

text-align: center;

margin: 60px auto;

}

.section h1 {

position: relative;

margin-top: -14px;

display: inline-block;

letter-spacing: 4px;

}

.top-border-left {

position: absolute;

left: 0;

height: 2px;

width: 24%;

background-color: #333;

}

.top-border-right {

position: absolute;

right: 0;

height: 2px;

width: 23%;

background-color: #333;

}

@media (max-width: 685px) {

.top-border-left {

width: 18%;

}

.top-border-right {

width: 18%;

}

}

.section p {

width: 61%;

margin: 20px auto 40px auto;

line-height: 30px;

}

.section a {

outline: 0;

display: inline-block;

padding: 20px;

margin-bottom: 40px;

width: 440px;

max-width: 80%;

background-color: #333;

color: #fff;

font-size: 22px;

letter-spacing: 3px;

transition: all 0.3s ease 0s;

-moz-transition: all 0.3s ease 0s;

-webkit-transition: all 0.3s ease 0s;

}

.section a:hover {

background-color: #171e2f;

}

.section a:link,

.section a:visited,

.section a:link:hover,

.section a:visited:hover {

text-decoration: none;

color: #fff;

}

@media (max-width: 500px) {

.top-border-left {

display: none;

}

.top-border-right {

display: none;

}

.section {

border-top: 2px solid #333;

}

.section h1 {

margin: 20px 6px;

}

}