这种图片效果css怎么显示 四个图片四个角

html-css08

这种图片效果css怎么显示 四个图片四个角,第1张

用css3的border-radius

#rcorners3 {

    border-radius: 25px//这里如果设定一个数值,则四个角为相同圆角,如果设定四个不同数值,则四个角不相同。

    background: url(图片.jpg)

    background-position: left top

    background-repeat: repeat

    padding: 20px 

    width: 200px

    height: 150px 

}

border-radius所有四个边角 :

border-*-*-radius 属性的缩写

border-top-left-radius定义了左上角的弧度

border-top-right-radius定义了右上角的弧度

border-bottom-right-radius定义了右下角的弧度

border-bottom-left-radius定义了左下角的弧度

偶然间发现一个简单实现四角边框的方法

比如 一个div 套个 input框, 然后div给个背景色

里面的input框用border-radius,这样就可以凸显出四个边角了