rounded-corners 相关问题

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

如何计算圆角多边形的尖角?

基本上是这个问题,但反过来:如何计算多边形的圆角? 我(至少)有一个由边缘组成的多边形,其中有圆角,我想完全

回答 1 投票 0

CSS - 带倾斜和圆角的盒子

我目前正在开发一个 Web 项目,并面临一些与 CSS 相关的问题。我需要帮助为我在下面粘贴的界面元素找到解决方案(响应式)。 我已经去了...

回答 1 投票 0

UIBezierPath - 添加圆角

我正在使用 UIBezierPath 来绘制曲线。然而,曲线有效,我无法弯曲线的边缘。 如果您查看曲线的顶部/底部,您可以看到边缘是

回答 2 投票 0

使用win32自定义圆形按钮

我想使用 win32 创建一个自定义按钮。经过搜索,我找到了一组方法,包括使用 BS_OWNERDRAW ,我得到了想要的结果,这是当按钮是矩形时,但是......

回答 1 投票 0

WPF圆角文本框

我不懂WPF,现在正在学习。我正在寻找 WPF 中的圆角 TextBox。所以我搜索了Google并找到了一段XAML: 我不了解WPF,现在正在学习。我在 WPF 中寻找圆角TextBox。所以我在Google上搜索并找到了一块XAML: <!–Rounded Corner TextBoxes–> <ControlTemplate x:Key=”RoundTxtBoxBaseControlTemplate” TargetType=”{x:Type Control}”> <Border Background=”{TemplateBinding Background}” x:Name=”Bd” BorderBrush=”{TemplateBinding BorderBrush}” BorderThickness=”{TemplateBinding BorderThickness}” CornerRadius=”6″> <ScrollViewer x:Name=”PART_ContentHost”/> </Border> <ControlTemplate.Triggers> <Trigger Property=”IsEnabled” Value=”False”> <Setter Property=”Background” Value=”{DynamicResource {x:Static SystemColors.ControlBrushKey}}” TargetName=”Bd”/> <Setter Property=”Foreground” Value=”{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}”/> </Trigger> <Trigger Property=”Width” Value=”Auto”> <Setter Property=”MinWidth” Value=”100″/> </Trigger> <Trigger Property=”Height” Value=”Auto”> <Setter Property=”MinHeight” Value=”20″/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> 所以请告诉我将其粘贴到哪里XAML。请详细帮助我。我是 WPF 的初学者。 @Smolla 在对 @Daniel Casserly 的回答的评论中给出了更好的答案: <TextBox Text="TextBox with CornerRadius"> <TextBox.Resources> <Style TargetType="{x:Type Border}"> <Setter Property="CornerRadius" Value="3"/> </Style> </TextBox.Resources> </TextBox> 如果您希望 TextBox 和 ListBox 的所有边框都有圆角,请将样式放入您的 Window 或 App 中<Resources>。 在 WPF 中,您可以修改或重新创建控件的外观。因此,如果您的示例他们所做的是通过修改现有 ControlTemplate 的 TextBox 来更改文本框的外观。因此,要查看和探索这段代码,只需使用下面的代码 <Window x:Class="WpfApplication4.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="300"> <Window.Resources> <ControlTemplate x:Key="TextBoxBaseControlTemplate" TargetType="{x:Type TextBoxBase}"> <Border Background="{TemplateBinding Background}" x:Name="Bd" BorderBrush="Black" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="10"> <ScrollViewer x:Name="PART_ContentHost"/> </Border> <ControlTemplate.Triggers> <Trigger Property="IsEnabled" Value="False"> <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" TargetName="Bd"/> <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> </Trigger> <Trigger Property="Width" Value="Auto"> <Setter Property="MinWidth" Value="100"/> </Trigger> <Trigger Property="Height" Value="Auto"> <Setter Property="MinHeight" Value="20"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Window.Resources> <Grid> <TextBox Template="{StaticResource TextBoxBaseControlTemplate}" Height="25" Margin="5"></TextBox> </Grid> 因此,我们在窗口的资源部分声明了一个静态资源,并在 Template 的 TextBox 属性中使用了 Resource TextBoxBaseControlTemplate 作为 Template="{StaticResource TextBoxBaseControlTemplate}" 。 自定义 WPF 控件的模板只需参考此文档即可获得想法 http://msdn.microsoft.com/en-us/magazine/cc163497.aspx 您可以使用以下样式将所有文本框更改为圆角: <Style TargetType="{x:Type TextBox}"> <Style.Resources> <Style TargetType="{x:Type Border}"> <Setter Property="CornerRadius" Value="3" /> </Style> </Style.Resources> </Style> 受到以下答案的启发:https://stackoverflow.com/a/13858357/3387453 只需将文本框的 BorderThickness 设置为零即可在文本框周围添加边框。 <Border BorderThickness="1" BorderBrush="Black" CornerRadius="10" Padding="2" HorizontalAlignment="Center" VerticalAlignment="Center"> <TextBox Text="Hello ! " BorderThickness="0"/> </Border> 输出如图所示! 这个问题在 msdn 上得到了很好的讨论: http://social.msdn.microsoft.com/forums/en-US/wpf/thread/549775ed-1c2a-4911-9078-d9c724294fb3/ 尝试那里的解决方案,它们非常详细,并且足够详细,让您知道将代码放在哪里。 您可以使用附加属性来设置TextBox边框半径(同样适用于按钮)。 为附加属性创建类 public class CornerRadiusSetter { public static CornerRadius GetCornerRadius(DependencyObject obj) => (CornerRadius)obj.GetValue(CornerRadiusProperty); public static void SetCornerRadius(DependencyObject obj, CornerRadius value) => obj.SetValue(CornerRadiusProperty, value); public static readonly DependencyProperty CornerRadiusProperty = DependencyProperty.RegisterAttached(nameof(Border.CornerRadius), typeof(CornerRadius), typeof(CornerRadiusSetter), new UIPropertyMetadata(new CornerRadius(), CornerRadiusChangedCallback)); public static void CornerRadiusChangedCallback(object sender, DependencyPropertyChangedEventArgs e) { Control control = sender as Control; if (control == null) return; control.Loaded -= Control_Loaded; control.Loaded += Control_Loaded; } private static void Control_Loaded(object sender, EventArgs e) { Control control = sender as Control; if (control == null || control.Template == null) return; control.ApplyTemplate(); Border border = control.Template.FindName("border", control) as Border; if (border == null) return; border.CornerRadius = GetCornerRadius(control); } } 然后您可以使用附加属性语法来设置多个文本框的样式,而无需重复样式: <TextBox local:CornerRadiusSetter.CornerRadius="10" /> <TextBox local:CornerRadiusSetter.CornerRadius="5, 0, 0, 5" /> <TextBox local:CornerRadiusSetter.CornerRadius="10, 4, 18, 7" /> 以困难的方式去做。 在 Visual Studio 中创建一个新的空 WPF 项目。将 TextBox 添加到主 Window。然后将鼠标放在 TextBox 上,右键单击并选择 编辑模板、编辑副本...。在出现的对话框中,选择应用于全部和此文档。 您现在拥有 TextBox 模板的副本。现在看看名称为 Border 的 border。只需添加一个 CornerRadius 即可。 接下来将此代码复制/粘贴到您的App.xaml中的/Application/Application.Resources/ResourceDictionary中。 它比其他解决方案需要更多的时间,它更复杂,但更干净,一旦你掌握了这个过程,你就可以使用 WPF 做任何你想做的事情。 这读起来很有趣。

回答 7 投票 0

如何制作半圆角边框?

我有一个 RoundPanel 类,它扩展了 JPanel 并提供圆形外观。 JPanel user_icon = new RoundPanel(8); user_icon.setBackground(Color.decode("#363b41")); user_icon.setBorde...

回答 1 投票 0

如何在 Qt 中的弹出窗口小部件上创建平滑的圆角

我有一个带有 windowsflag Qt::Popup 设置的小部件,我正在尝试创建平滑的圆角。 我尝试使用样式表,但角的透明部分变成黑色。一样的

回答 1 投票 0

圆形侧边菜单栏角

我正在使用 C++ 开发 Qt 小部件应用程序。 在我的主窗口中,我有一个 QGridLayout,其中包含 3 个主要小部件:顶部的标题、左侧的侧边菜单和右侧的正文。 我主要用...

回答 1 投票 0

IE8 中的 CSS 圆角无标题页面...</desc> <question vote="58"> <p>我在 IE8 中遇到圆角问题。我尝试了几种方法都没有成功。</p> <p>这是我的代码:</p> <pre><code><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Page</title> <style> body { font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; padding: 2px; margin: 2px; color: #505050; line-height: normal; } p { margin: 4px; } .categoryheading3 { -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; background-color: #297BB6; color: #FFFFFF; font-size: 16px; font-weight: 700; padding: 8px 0; text-align: center; margin: 0px; } .leftcolumn { width: 174px; padding: 8px; float: left; display: inline-block; background-color: transparent; /*--min-height: 500px*/ overflow: hidden; } .lefttop { display: inline-block; width: inherit; margin: 0 5px 2em 0; float: left; width: 160px; background-color: #FFFFFF; border: 2px solid #297BB6; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } </style> </head> <body> <div class="leftcolumn"> <div class="lefttop"> <H4 class="categoryheading3">Heading</H4> <p>sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text </p> </div> </div> </body> </html> </code></pre> <p>这会在 Firefox 中产生:</p> <p><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL1Fyc1BPLmpwZw==" alt="firefox example"/></p> <p>但是在 IE8 中是这样的:</p> <p><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL1h6dUNYLmpwZw==" alt="IE8 makes me sad"/></p> <p>如果有人有任何建议,我将不胜感激! </p> <p>编辑:约瑟夫建议使用pie.htc提供了帮助,但是我仍然在为这个元素不起作用而苦苦挣扎:</p> <pre><code>.categoryheading3 { -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; behavior: url(PIE.htc); background-color: #297BB6; color: #FFFFFF; font-size: 16px; font-weight: 700; padding: 8px 0; text-align: center; margin: 0px; } </code></pre> </question> <answer tick="true" vote="69"> <p>Internet Explorer(版本 9 以下)本身不支持圆角。</p> <p>有一个令人惊叹的脚本会神奇地为您添加它:<a href="http://css3pie.com/" rel="noreferrer">CSS3 PIE</a>。</p> <p>我已经使用了很多次,效果惊人。</p> </answer> <answer tick="false" vote="33"> <h1><a href="http://davidwalsh.name/css-rounded-corners" rel="nofollow noreferrer">IE8 中的圆角</a></h1> <p>Internet Explorer 8(及更早版本)<strong>不</strong>支持圆角,<strong>但是</strong>还有<strong>您可以考虑的其他解决方案:</strong></p> <ul> <li><p>使用圆角<pre><code>Images</code></pre>代替(<a href="http://www.generateit.net/rounded-corner/" rel="nofollow noreferrer"><strong>这个</strong></a>生成器是一个很好的资源)</p> </li> <li><p>使用<pre></pre>此处<a href="http://jquery.malsup.com/corner" rel="nofollow noreferrer"><strong></strong>中的</a><code>jQuery Corner plugin</code></p> </li> <li><p>使用一个非常好的脚本,称为<pre><code>CSS3 PIE</code></pre>,来自<strong><a href="http://css3pie.com" rel="nofollow noreferrer">这里</a></strong>(优点和缺点<a href="http://css-plus.com/2011/05/ie-and-rounded-corners/" rel="nofollow noreferrer">这里</a>)</p> </li> <li><p>从<pre></pre>这里<a href="http://www.cssjuice.com/25-rounded-corners-techniques-with-css/" rel="nofollow noreferrer"><strong></strong>结帐</a><code>CSS Juice</code></p> </li> <li><p>另一个好的脚本是<pre><code>IE-CSS3</code></pre>,来自<strong><a href="http://fetchak.com/ie-css3/" rel="nofollow noreferrer">这里</a></strong></p> </li> </ul> <p>尽管 CSS PIE 是最流行的解决方案,我建议您查看所有其他解决方案并选择最适合您需求的解决方案。</p> <p>我希望它有用。祝你好运!</p> </answer> <answer tick="false" vote="4"> <p>看到这篇文章后,我不知道 css3pie.com,一个非常有用的网站:</p> <p>但是经过测试,它对我来说也不起作用。但是我发现将其包装在 .PHP 文件中效果很好。所以代替:</p> <pre><code>behavior: url(PIE.htc); </code></pre> <p>用这个:</p> <pre><code>behavior: url(PIE.php); </code></pre> <p>我把我的放在一个名为 jquery 的文件夹中,所以我的是:</p> <pre><code> behavior: url(jquery/PIE.php); </code></pre> <p>所以去他们的下载或在这里获取:</p> <p><a href="http://css3pie.com/download-latest" rel="nofollow">http://css3pie.com/download-latest</a></p> <p>并使用他们的 PHP 文件。在 PHP 文件中,它解释了某些服务器未配置为正确使用 .HTC。这就是我遇到的问题。</p> <p>尝试一下!我做了,它有效。希望这也能帮助其他人。</p> </answer> <answer tick="false" vote="2"> <p><a href="http://fetchak.com/ie-css3/" rel="nofollow">http://fetchak.com/ie-css3/</a> 适用于 IE 6+。如果 css3pie 不适合你,请使用这个。</p> </answer> <answer tick="false" vote="2"> <p>PIE.htc 对我来说非常有用(<a href="http://css3pie.com/" rel="nofollow">http://css3pie.com/</a>),但有一个问题:</p> <p>您应该写入PIE.htc的绝对路径。当我使用相对路径时,它对我不起作用。</p> </answer> <answer tick="false" vote="0"> <p>由于 Internet Explorer 本身不支持圆角。 因此,更好的跨浏览器处理方法是在角落使用圆角图像。许多著名网站都使用这种方法。</p> <p>您还可以在网络上找到圆形图像生成器。其中一个链接是 <a href="http://www.generateit.net/rounded-corner/" rel="nofollow">http://www.generateit.net/rounded-corner/</a></p> </answer> </body></html>

我在 IE8 中遇到圆角问题。我尝试了几种方法但没有成功。 这是我的代码: 无标题页面...</desc> <question vote="58"> <p>我在 IE8 中遇到圆角问题。我尝试了几种方法都没有成功。</p> <p>这是我的代码:</p> <pre><code><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Page</title> <style> body { font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; padding: 2px; margin: 2px; color: #505050; line-height: normal; } p { margin: 4px; } .categoryheading3 { -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; background-color: #297BB6; color: #FFFFFF; font-size: 16px; font-weight: 700; padding: 8px 0; text-align: center; margin: 0px; } .leftcolumn { width: 174px; padding: 8px; float: left; display: inline-block; background-color: transparent; /*--min-height: 500px*/ overflow: hidden; } .lefttop { display: inline-block; width: inherit; margin: 0 5px 2em 0; float: left; width: 160px; background-color: #FFFFFF; border: 2px solid #297BB6; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } </style> </head> <body> <div class="leftcolumn"> <div class="lefttop"> <H4 class="categoryheading3">Heading</H4> <p>sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text </p> </div> </div> </body> </html> </code></pre> <p>这会在 Firefox 中产生:</p> <p><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL1Fyc1BPLmpwZw==" alt="firefox example"/></p> <p>但是在 IE8 中是这样的:</p> <p><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL1h6dUNYLmpwZw==" alt="IE8 makes me sad"/></p> <p>如果有人有任何建议,我将不胜感激! </p> <p>编辑:约瑟夫建议使用pie.htc提供了帮助,但是我仍然在为这个元素不起作用而苦苦挣扎:</p> <pre><code>.categoryheading3 { -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; behavior: url(PIE.htc); background-color: #297BB6; color: #FFFFFF; font-size: 16px; font-weight: 700; padding: 8px 0; text-align: center; margin: 0px; } </code></pre> </question> <answer tick="true" vote="69"> <p>Internet Explorer(版本 9 以下)本身不支持圆角。</p> <p>有一个令人惊叹的脚本会神奇地为您添加它:<a href="http://css3pie.com/" rel="noreferrer">CSS3 PIE</a>。</p> <p>我已经使用了很多次,效果惊人。</p> </answer> <answer tick="false" vote="33"> <h1><a href="http://davidwalsh.name/css-rounded-corners" rel="nofollow noreferrer">IE8 中的圆角</a></h1> <p>Internet Explorer 8(及更早版本)<strong>不</strong>支持圆角,<strong>但是</strong>还有<strong>您可以考虑的其他解决方案:</strong></p> <ul> <li><p>使用圆角<pre><code>Images</code></pre>代替(<a href="http://www.generateit.net/rounded-corner/" rel="nofollow noreferrer"><strong>这个</strong></a>生成器是一个很好的资源)</p> </li> <li><p>使用<pre></pre>此处<a href="http://jquery.malsup.com/corner" rel="nofollow noreferrer"><strong></strong>中的</a><code>jQuery Corner plugin</code></p> </li> <li><p>使用一个非常好的脚本,称为<pre><code>CSS3 PIE</code></pre>,来自<strong><a href="http://css3pie.com" rel="nofollow noreferrer">这里</a></strong>(优点和缺点<a href="http://css-plus.com/2011/05/ie-and-rounded-corners/" rel="nofollow noreferrer">这里</a>)</p> </li> <li><p>从<pre></pre>这里<a href="http://www.cssjuice.com/25-rounded-corners-techniques-with-css/" rel="nofollow noreferrer"><strong></strong>结帐</a><code>CSS Juice</code></p> </li> <li><p>另一个好的脚本是<pre><code>IE-CSS3</code></pre>,来自<strong><a href="http://fetchak.com/ie-css3/" rel="nofollow noreferrer">这里</a></strong></p> </li> </ul> <p>尽管 CSS PIE 是最流行的解决方案,我建议您查看所有其他解决方案并选择最适合您需求的解决方案。</p> <p>我希望它有用。祝你好运!</p> </answer> <answer tick="false" vote="4"> <p>看到这篇文章后,我不知道 css3pie.com,一个非常有用的网站:</p> <p>但是经过测试,它对我来说也不起作用。但是我发现将其包装在 .PHP 文件中效果很好。所以代替:</p> <pre><code>behavior: url(PIE.htc); </code></pre> <p>用这个:</p> <pre><code>behavior: url(PIE.php); </code></pre> <p>我把我的放在一个名为 jquery 的文件夹中,所以我的是:</p> <pre><code> behavior: url(jquery/PIE.php); </code></pre> <p>所以去他们的下载或在这里获取:</p> <p><a href="http://css3pie.com/download-latest" rel="nofollow">http://css3pie.com/download-latest</a></p> <p>并使用他们的 PHP 文件。在 PHP 文件中,它解释了某些服务器未配置为正确使用 .HTC。这就是我遇到的问题。</p> <p>尝试一下!我做了,它有效。希望这也能帮助其他人。</p> </answer> <answer tick="false" vote="2"> <p><a href="http://fetchak.com/ie-css3/" rel="nofollow">http://fetchak.com/ie-css3/</a> 适用于 IE 6+。如果 css3pie 不适合你,请使用这个。</p> </answer> <answer tick="false" vote="2"> <p>PIE.htc 对我来说非常有用(<a href="http://css3pie.com/" rel="nofollow">http://css3pie.com/</a>),但有一个问题:</p> <p>您应该写入PIE.htc的绝对路径。当我使用相对路径时,它对我不起作用。</p> </answer> <answer tick="false" vote="0"> <p>由于 Internet Explorer 本身不支持圆角。 因此,更好的跨浏览器处理方法是在角落使用圆角图像。许多著名网站都使用这种方法。</p> <p>您还可以在网络上找到圆形图像生成器。其中一个链接是 <a href="http://www.generateit.net/rounded-corner/" rel="nofollow">http://www.generateit.net/rounded-corner/</a></p> </answer> </body></html>

回答 0 投票 0

Python中的IOS角平滑

我正在做一个涉及视频帧操作的项目,需求之一是为帧添加平滑的圆角。我对如何添加圆角进行了一些研究...

回答 1 投票 0

如何使用vue填充圆桌行之间的空间?

我正在使用 Vue 中的组件,并尝试将每一行变成基本上圆形的药丸。目前我有这个:(https://i.stack.imgur.com/XYn7n.png)我希望角的内部部分是

回答 1 投票 0

如何在输入栏底部制作非圆角线

我正在制作流利风格的输入栏 这就是我的进步 但是,我希望它的线条没有圆角,并且当焦点放在它上时它会改变它的高度(它移动布局) 我能怎么做? 这是我的代码↓...

回答 1 投票 0

如何在CSS中制作4个弧形角边框?

示例图片 我有四个摘要部分,它们都有四个小弯角边框,但我无法做到这一点。 我能够用伪 elem 之后和之前制作两个角...

回答 1 投票 0

在 NavigationStack 上设置角半径:SwiftUI 中无响应的内容视图区域

我尝试将cornerRadius应用于NavigationStack,但结果,触摸区域被限制在初始视图位置。简单来说,如果滑块关闭,则无法打开...

回答 1 投票 0

如何使用 Swift 将 UITextView 中显示的图像附件的角变圆?

我在这个论坛上写文章是为了获得帮助,我正在 Swift 上为 iPhone 编写一个应用程序,我创建了一个文本视图来向最终用户展示一些信息,但我已经包含了一张图片作为附件...

回答 1 投票 0

如何制作圆角的div

如何制作一个div,让它的边框角是圆角的?

回答 6 投票 0

如何在 MUI x-charts 条形图上放置圆角?

我使用 mui barchart 创建了一个图表, 从 '@mui/x-charts/BarChart' 导入 { BarChart }; 从 '@mui/material/styles' 导入 { ThemeProvider, createTheme, useTheme }; 我想给酒吧

回答 1 投票 0

ImageView 覆盖 BottomSheetDialogFragment 的圆角

BottomSheetDialog 通过使用以下代码从顶部舍入。 覆盖 fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setStyle(STYLE_NORMAL, R.style.

回答 1 投票 0

MaterialCardView 圆角仅从顶部

我只是想让我的bottomSheetDialog仅从右上角和左上角变圆。 我想让我的bottomSheetDialog从顶角开始变圆,但从下面直接变圆。 我尝试了多种方法

回答 1 投票 0

React bootstrap 导航栏圆角

我最近开始自学一些有关 React-Bootstrap 的知识,并且正在尝试掌握自定义某些元素的窍门。 我在下面用标准 JavaScript、HTML 和 CSS 构建了这个导航栏,...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.