-1

这是否可以使圆角的 div 扭曲。所有的角落都是不同的半径？

任何将是跨浏览器的 jquery 链接或 css 我尽我最大的努力寻求解决方案，但没有找到任何帮助

4

3 回答 3

1

是的！！您可以border-radius像这样使用 css 为所有角落设置不同的

div{
    border-top-left-radius:5px;
    border-top-right-radius:7px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:12px;
}

Js 小提琴示例

更新：您在评论中分享的图片的效果需要css的两个属性1.border-radius
2.transform

所以这是实现这一目标的代码

div
{
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    border-bottom-left-radius:50px;
    border-bottom-right-radius:10px;
    background-color:Gray;
    height:200px;
    width:350px;
    transform:rotate(-15deg);
    -webkit-transform: rotate(-15deg); 
}

更新了 Js Fiddle

于 2013-07-14T10:25:41.057 回答
0

对于跨浏览器，您需要添加所有浏览器 CSS 定义。

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 40px;
-webkit-border-bottom-left-radius: 30px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 40px;
-moz-border-radius-bottomleft: 30px;
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 30px;

演示http://jsfiddle.net/kevinPHPkevin/WVBTJ/

于 2013-07-14T10:29:39.437 回答
0

你可以用 CSS做到这一点

div {
   border-radius: 1px 2px 3px 4px; /* top-left top-right bottom-right bottom-left */
}

MDN是查找 css / js 规范的非常好的资源。对于 jquery 使用他们的官方文档

于 2013-07-14T10:24:43.407 回答