本文介绍了一种利用HTML与CSS结合的方式，在不使用额外图片的情况下，通过简单的字符来实现美观且高效的圆角效果。这种方法不仅提高了网页加载速度，还保持了良好的视觉体验。
利用四个•字符放在四个角上，充当圆角，个人认为比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>•</b></em>
<em id="tr"><b>•</b></em>
<em id="bl"><b>•</b></em>
<em id="br"><b>•</b></em>
</div>
</body>
</html>
扫一扫
498
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
