特殊字符方法实现圆角盒子

利用四个•字符放在四个角上,充当圆角,个人认为比div叠加的圆角框美观,比图片也更高效一些,代码如下:

<style type="text/css">
.container {
background:  #836FFF; 
margin: 50px 200px;
width: 300px;
height: 200px;
position: relative;
font-weight: normal; 
}
em {
width: 20px;
height: 20px;
position: absolute;
overflow: hidden;
}
.container em b{
font-size: 150px;
font-family: arial;
font-weight: normal;
color:  #836FFF;
background: white;
line-height: 50px;
position: absolute;
}
#tl b{
left:-8px;
top: -6px;
}
#tl {
top: 0;
left: 0;
}
#tr b{
left:-25px;
top: -6px;
}
#tr {
top: 0;
right: 0;
}
#bl b{
left:-8px;
top: -23px;
}
#bl {
bottom: 0;
left: 0;
}
#br b{
left:-25px;
top: -23px;
}
#br {
bottom: 0;
right: 0;
}
</style>
<script></script>
</head>
<!-- 正文内容-->
<body>

<div class="container">
<em id="tl"><b>&bull;</b></em>
<em id="tr"><b>&bull;</b></em>
<em id="bl"><b>&bull;</b></em>
<em id="br"><b>&bull;</b></em>
</div>

</body>
</html>

你可能感兴趣的:(特殊字符方法实现圆角盒子)