이미지료 표현해야했던 좀 더 디자인스러움이 가미된 점선라인을 CSS3에서 dashed 스타일을 보강하여 사용할 수 있습니다.
데모사이트로 이동하면, 해당 효과에 관한 HTML소스와 CSS3소스를 확인할 수 있습니다.
[html]
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<div class="dashed-borders">
<p>Horrible Dashes</p>
</div>
</div>
</body>
</html>
[css]
.dashed-borders {
background: #1d4a91;
}
.dashed-borders:before {
content: "";
display: block;
height: 5px;
width: 100%;
margin-top: 40px;
background-color: #2356a1;
border-top: 2px dashed #091f5c;
border-bottom: 2px solid #091f5c;
box-shadow: 0 7px 0 0 #183f84;
}
.dashed-borders:after {
content: "";
display: block;
height: 5px;
width: 100%;
margin-bottom: 40px;
background-color: #2356a1;
border-bottom: 2px dashed #091f5c;
border-top: 2px solid #091f5c;
box-shadow: 0 -7px 0 0 #183f84;
}
.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: <span class="crayon-cn" style="box-sizing: border-box; font-fam
|
