Questions tagged «rounded-corners»

用户界面设计特征的名称,用于代替两条垂直线的端点处形成的90度角。




23
CSS3的border-radius属性和border-collapse:collapse不能混合使用。如何使用边框半径创建带有圆角的折叠表格?
编辑-原标题:是否有其他方式来实现border-collapse:collapse的CSS(为了有倒塌,圆角表)? 事实证明,仅使表格的边框折叠起来并不能解决根本问题,因此我更新了标题以更好地反映讨论内容。 我正在尝试使用该CSS3 border-radius属性制作带有圆角的表。我正在使用的表格样式如下所示: table { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px } 这是问题所在。我也想设置该border-collapse:collapse属性,并且在设置该属性时border-radius不再起作用。有没有一种基于CSS的方式可以获得与border-collapse:collapse不实际使用相同的效果? 编辑: 我在此处做了一个简单的页面来演示问题(仅Firefox / Safari)。 看来问题的很大一部分是将表设置为具有圆角不会影响Corner td元素的角。如果桌子全是一种颜色,那将不是问题,因为我可以td分别使第一行和最后一行的上角和下角变圆。但是,我在表中使用了不同的背景色来区分标题和条纹,因此内部td元素也将显示其圆角。 拟议解决方案摘要: 用另一个带有圆角的元素包围桌子是行不通的,因为桌子的四角“渗出了”。 将边框宽度指定为0不会折叠表格。 底部td四角设置CELLSPACING零后仍然广场。 相反,使用JavaScript可以避免此问题。 可能的解决方案: 这些表是用PHP生成的,因此我可以将一个不同的类应用于每个外部th / tds并分别设置每个角的样式。我不想这样做,因为它不是很优雅,并且要应用于多张桌子有点痛苦,所以请继续提出建议。 可能的解决方案2是使用JavaScript(特别是jQuery)对角进行样式设置。此解决方案也可以使用,但仍然不是我想要的(我知道我很挑剔)。我有两个保留意见: 这是一个非常轻量级的网站,我希望将JavaScript保持在最低水平 使用边界半径对我来说具有吸引力的一部分是优美的退化和渐进的增强。通过对所有圆角使用border-radius,我希望在支持CSS3的浏览器中拥有一个一致的圆形站点,并在其他浏览器中拥有一个一致的正方形站点(我在看着您,IE)。 我知道今天尝试使用CSS3似乎没有必要,但是我有自己的理由。我还要指出的是,此问题是w3c规范的结果,而不是CSS3的支持不佳,因此,当CSS3得到更广泛的支持时,任何解决方案都仍然是相关且有用的。


21
使用CSS创建圆角[关闭]
按照目前的情况,这个问题不适合我们的问答形式。我们希望答案会得到事实,参考或专业知识的支持,但是这个问题可能会引起辩论,争论,民意测验或进一步的讨论。如果您认为此问题可以解决并且可以重新提出,请访问帮助中心以获取指导。 7年前关闭。 如何使用CSS创建圆角?

15
如何绕过按钮的角落
我有一个矩形图像(jpg),想用它在xcode中用圆角填充按钮的背景。 我写了以下内容: UIButton *button = [[UIButton buttonWithType:UIButtonTypeRoundedRect] retain]; CGRect frame = CGRectMake(x, y, cardWidth, cardHeight); button.frame = frame; [button setBackgroundImage:backImage forState:UIControlStateNormal]; 但是,我用这种方法得到的按钮没有圆角:而是一个看起来像我的原始图像的纯矩形。我该如何获取带有圆角的图像来表示我的按钮? 谢谢!

7
Android-可绘制,仅在顶部带有圆角
我有一个可绘制的背景,有一个圆角的矩形: <shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="@color/white" /> <stroke android:width="1dp" android:color="@color/light_gray" /> <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" /> <corners android:radius="6dp" /> </shape> 如预期的那样,这工作正常。 现在,我想将其更改为仅圆角,因此将其更改为: <shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="@color/white" /> <stroke android:width="1dp" android:color="@color/light_gray" /> <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" /> <corners android:topLeftRadius="6dp" android:topRightRadius="6dp" android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp"/> </shape> 但是现在没有一个角是圆的,我得到一个普通的矩形。我在这里想念什么?


13
如何使CSS3圆角在Chrome / Opera中隐藏溢出
我需要在父div上加上圆角以掩盖其子级的内容。overflow: hidden可以在简单的情况下工作,但是当父级相对或绝对定位时,在基于Webkit的浏览器和Opera中会中断。 这适用于Firefox和IE9: 的CSS #wrapper { width: 300px; height: 300px; border-radius: 100px; overflow: hidden; position: absolute; } #box { width: 300px; height: 300px; background-color: #cde; } 的HTML <div id="wrapper"> <div id="box"></div> </div> JSFiddle上的示例 谢谢您的帮助! 更新:导致此问题的错误已在Chrome中修复。我还没有重新测试Opera或Safari。

11
在UIImageView上设置转角半径不起作用
我有点茫然。我已经使用UIView的layer属性来处理我的应用程序中多个元素的角落。但是,这个UIImageView根本不符合要求。不知道我在想什么。 UIImageView(称为PreviewImage)包含在表视图单元格中。我尝试将cornerRadius属性的多个位置(在单元格本身以及在创建该单元格的控制器中)设置为无效。 static NSString *CellIdentifier = @"MyTableViewCell"; MyTableViewCell *cell = (MyTableViewCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier]; if (cell == nil) { NSArray *topLevelObjects = [[NSBundle mainBundle] loadNibNamed:CellIdentifier owner:self options:nil]; cell = [topLevelObjects objectAtIndex:0]; cell.previewImage.layer.cornerRadius = 20; //Made it 20 to make sure it's obvious. } 关于我丢失的单元格加载方式,有什么问题吗?

5
如何创建WPF圆角容器?
我们正在创建一个XBAP应用程序,我们需要在单个页面中的各个位置具有圆角,并且我们希望拥有一个WPF圆角容器以在其中放置许多其他元素。是否有人对我们如何最好地做到这一点有任何建议或示例代码?使用上的样式还是创建自定义控件?

8
如何以编程方式圆角设置随机背景颜色
我想绕过一个视图的各个角落,并根据运行时的内容更改视图的颜色。 TextView v = new TextView(context); v.setText(tagsList.get(i)); if(i%2 == 0){ v.setBackgroundColor(Color.RED); }else{ v.setBackgroundColor(Color.BLUE); } v.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT)); v.setPadding(twoDP, twoDP, twoDP, twoDP); v.setBackgroundResource(R.drawable.tags_rounded_corners); 我希望设置一个drawable,并且颜色会重叠,但是它们不会重叠。我执行的第二个是背景。 有什么方法可以通过编程方式创建此视图,同时要记住,背景颜色要等到运行时才能确定? 编辑:我现在只在红色和蓝色之间交换以进行测试。以后,用户可以选择颜色。 编辑: tags_rounded_corners.xml: <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <corners android:bottomRightRadius="2dp" android:bottomLeftRadius="2dp" android:topLeftRadius="2dp" android:topRightRadius="2dp"/> </shape>


17
圆桌角仅CSS
我进行了搜索,但无法找到满足我要求的解决方案。 我有一个普通的HTML表。我想要它不使用图像或JS,即纯CSS的圆角。像这样: 角单元的圆角,单元的1px粗边框。 到目前为止,我有这个: table { -moz-border-radius: 5px !important; border-collapse: collapse !important; border: none !important; } table th, table td { border: none !important } table th:first-child { -moz-border-radius: 5px 0 0 0 !important; } table th:last-child { -moz-border-radius: 0 5px 0 0 !important; } table tr:last-child td:first-child { -moz-border-radius: …

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.