淘先锋技术网

首页 1 2 3 4 5 6 7

在基于jquery mobile的网站或应用程序中,为了使界面更具有美观性,我们常常需要将图片做成圆角。下面是使用jquery mobile实现图片圆角的步骤:

.ui-corner-all{
border-radius: 10px;
}

首先,在样式表中新建一个class名为 .ui-corner-all(也可以自定义名称),这个class将作为所有图片的圆角样式。

接着,在html中,我们为需要添加圆角的图片添加上这个class名即可。

如果你需要为特定的图片添加不同的圆角半径,可以使用 .ui-corner-top-left、 .ui-corner-top-right、 .ui-corner-bottom-left 和 .ui-corner-bottom-right 这四个class分别控制图片圆角的四个角。例如:

.ui-corner-top-left{
border-radius: 20px 0 0 0;
}
.ui-corner-top-right{
border-radius: 0 20px 0 0;
}
.ui-corner-bottom-left{
border-radius: 0 0 0 20px;
}
.ui-corner-bottom-right{
border-radius: 0 0 20px 0;
}

这是为分别为图片的四个角设置不同的圆角半径的样式,方便实现更多样式的图片圆角。