html - CSS border doesn't work -
html:
<body> <div><p>something</p></div> <div class = "mypanel"> <div class = "heading">my header</div> <div class = "body">my body</div> </div> <div><p>something</p></div> </body>
css:
.mypanel: { border: 1px solid #687d6d; border-radius: 5px 5px 0 0; box-shadow: 10px 10px 1px black; margin: 3%; } .mypanel .heading { background: #b6f0c4; border-radius: 5px 5px 0 0; color: #687d6d; padding: 10px 20px; } .mypanel .body { padding: 10px 20px; }
what i'm curious that, if set border
on .mypanel
, doesn't work on .mypanel .body
, there's no border around .mypanel .body
, why?
here problem:
.mypanel: {
just remove : (colon)
snippet below:
.mypanel { border: 1px solid #687d6d; border-radius: 5px 5px 0 0; box-shadow: 10px 10px 1px black; margin: 3%; } .mypanel .heading { background: #b6f0c4; border-radius: 5px 5px 0 0; color: #687d6d; padding: 10px 20px; } .mypanel .body { padding: 10px 20px; }
<div> <p>something</p> </div> <div class="mypanel"> <div class="heading">my header</div> <div class="body">my body</div> </div> <div> <p>something</p> </div>
Comments
Post a Comment