css圆角背景图片怎么弄呀？

html-css023

css圆角背景图片怎么弄呀？,第1张

一般是用画好的圆角图片充当背景来实现的，用photoshop画好圆角，切成需要的大小来填充背景即可

当然也有不要图片的做法，原理就是通过div来模拟像素的拐角，做法太极端，一般不采用。

圆角主要是通过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>

1. 可以使用css的border-image属性设置边框的背景图片。2. 可以使用background设置多个背景图片，并分别设置每个背景的位置。3. 把所有图片先合成一个圆形图片，然后整个图片作为背景图片。