圆角主要是通过border-radius 来实现:
border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性。
提示:该属性允许为元素添加圆角边框。
简单的例子,仅供参考:
<style>.box {margin:100 auto width:200px height:200px position:relative}
.shadow {width: 200px height:200px background:#ccc border-radius:10px}
.xxx {width:150px height:150px background:red position:absolute}
</style>
<body>
<div class="box">
<div class="shadow"></div>
<div class="xxx"></div>
</div>
</body>
有四种方法可以实现圆角。
第一、直接写CSS代码:border-radius
第二、四个圆角贴图;制作四个圆角的图片,然后用css定义
第三、直接制作整个圆角矩形背景
第四、定义12个背景色:左上角4个,右上角4个,右下角4个,左下角4个。
一般是用画好的圆角图片充当背景来实现的,用photoshop画好圆角,切成需要的大小来填充背景即可当然也有不要图片的做法,原理就是通过div来模拟像素的拐角,做法太极端,一般不采用。