如何获得圆角 [英] how to get round corners
本文介绍了如何获得圆角的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
Rounded Box Demo
</title>
<style type="text/css">
body {
background-color: #FFF;
margin: 0px;
padding: 0px;
font-size: 16px;
font-family: Georgia;
}
div.rounded-box {
position:relative;
width: 9em;
background-color: #E6E6E6;
margin: 3px;
}
/*********************
GLOBAL ATTRIBUTES
*********************/
div.top-left-corner, div.bottom-left-corner, div.top-right-corner, div.bottom-right-corner
{position:absolute; width:20px; height:20px; background-color:#FFF; overflow:hidden;}
div.top-left-inside, div.bottom-left-inside, div.top-right-inside, div.bottom-right-inside {position:relative; font-size:150px; font-family:arial; color:#E6E6E6; line-height: 40px;}
/*********************
SPECIFIC ATTRIBUTES
*********************/
div.top-left-corner { top:0px; left:0px; }
div.bottom-left-corner {bottom:0px; left:0px;}
div.top-right-corner {top:0px; right:0px;}
div.bottom-right-corner {bottom: 0px; right:0px;}
div.top-left-inside {left:-8px;}
div.bottom-left-inside {left:-8px; top:-17px;}
div.top-right-inside {left:-25px;}
div.bottom-right-inside {left:-25px; top:-17px;}
div.box-contents {
position: relative; padding: 8px; color:#000;
}
</style>
</head>
<body>
<div class="rounded-box">
<div class="top-left-corner"><div class="top-left-inside">•</div></div>
<div class="bottom-left-corner"><div class="bottom-left-inside">•</div></div>
<div class="top-right-corner"><div class="top-right-inside">•</div></div>
<div class="bottom-right-corner"><div class="bottom-right-inside">•</div></div>
<div class="box-contents">
Contents go here, but it must be at least two lines to look any good.
</div> <!-- end div.box-contents -->
</div> <!-- end div.rounded-box -->
</body>
</html>
推荐答案
这是WebKit，Gecko和实现CSS3的浏览器的CSS代码生成器，因此您可以在一个CSS代码中全部支持它们:http://border-radius.com/ [ ^ ].
—SA
This is a generator of CSS code for WebKit, Gecko and browsers implementing CSS3, so you can support them all in one CSS code: http://border-radius.com/[^].
—SA
检查这些
CSS3圆角生成器 [使用CSS的25种圆角技术 [
Check these
CSS3 Rounded Corner Generator[^]
25 Rounded Corners Techniques with CSS[^]
这篇关于如何获得圆角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
