标签: border

我试图在我的wpf应用程序中为业务对象定义一个dataTemplate,其集合绑定到ListBox.

<UserControl.Resources>
    <DataTemplate x:Key="ResizedItemsDataTemplate" DataType="{x:Type resizer:ResizeMonitorItem}">
              <Border x:Name="bdr" BorderBrush="Blue" 
                                     BorderThickness="1" 
                                     CornerRadius="2" 
                                     Width="auto"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Stretch">
                    <Grid Margin="2">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="14"></RowDefinition>
                            <RowDefinition Height="14"></RowDefinition>
                        </Grid.RowDefinitions>


                        <TextBlock Grid.Row="0" Text="{Binding SaveAsFileName}"></TextBlock>
                        <TextBlock Grid.Row="1" Text="{Binding ResizedImageFilePath}"></TextBlock>
                    </Grid>
             </Border>
    </DataTemplate>
</UserControl.Resources>
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0">    
    <Border BorderThickness="0,0,0,5" BorderBrush="DarkGray" >
        <ListBox x:Name="ListBoxResizeItems" ItemsSource="{Binding Path=ResizeItems}" BorderThickness="0" ItemTemplate="{DynamicResource ResizedItemsDataTemplate}">
        </ListBox>
    </Border>
</Grid>

如何使用x:Name = bdr定义边框以跨越每个列表框项的整个宽度？目前它只跨越其中的文本块,不需要填充listboxitem的整个宽度,并且每个listboxitem也有所不同.

我有一个表格,应用了以下CSS规则:

table { border-collapse: collapse; }
td { border: 2px solid Gray; }

我希望某些单元格有红色边框.

td.special { border: 2px solid Red; }

这不符合我的预期.在FireFox 3和IE8中它看起来像这样:

IE8/FF3渲染http://control-v.net/stackoverflow/1241757/ie8ff3.jpg

在IE7兼容模式(在IE8中运行),它看起来像这样:

IE7兼容模式渲染http://control-v.net/stackoverflow/1241757/ie7.jpg

我希望这四个方面<td>都是红色的.我怎样才能做到这一点？可在此处找到测试用例.

我正在创建一个自定义进度条(位于a下面WebView),我想绘制的是一条1dp宽的线WebView和它之间的线ProgressBar.我正在修改现有的drawable,即progress_horizontal.xml尝试过这样的事情:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

  (...)

  <item>
    <shape android:shape="line">
      <stroke android:width="1dp" android:color="#FF000000" />
    </shape>
  </item>

</layer-list>

然而,这条线是垂直居中的,但我希望它在drawable的顶部绘制.我能提出的唯一想法是在下面使用这个"hacky"渐变:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

  (...)

  <item>
    <shape>
      <gradient
          android:startColor="#FF000000"
          android:centerColor="#00000000"
          android:centerY="0.01"
          android:endColor="#00000000"
          android:angle="270"
      />
    </shape>
  </item>

</layer-list>

您是否有更好的想法如何绘制与定义的drawable顶部对齐的单一线条形状layer-list？

我有一个长方形div,就像上面那个.我想删除我的底部边框(从C到D)div.我怎样才能做到这一点？.

编辑:这是我的CSS

#index-03 {
  position: absolute;
  border: .1px solid #900;
  border-width: .1px;
  border-style: solid;
  border-color: #900;
  left: 0px;
  top: 102px;
  width: 900px;
  height: 27px;
}

我尝试删除GridView周围的红色边框,以完全填充我的日历屏幕(没有从左,右和顶部填充).

margin=0
padding=0
background=@null 

不解决问题.我不使用任何9path背景图像.有什么问题 ？

关于这一点有几个问题,所有这些似乎都说除去虚线边框的唯一方法是将有问题的widget/item上的focusPolicy设置为NoFocus.虽然这可以作为临时修复,但这可以防止在其他必要的focusEvents领域与所述小部件/项目进一步交互.

所述边界有问题:

这是为什么这不起作用的一个例子.

• 我有一个非模态小部件弹出窗口,想象一个图像的灯箱.
• 我想在窗口小部件外部检测mousePressEvent并因此关闭窗口小部件.要做到这一点,我应该抓住focusOutEvent.
• 但是,如果我的程序中的绝大多数小部件被设置为NoFocus(以消除边界问题),那么我无法捕获focusOutEvent,因为您猜对了,它们没有焦点策略.

这是另一个例子:

• 我有一个子类的QTreeWidget,所以我可以出于各种原因捕获keyPressEvents.
• QTreeWidget也设置为NoFocus以防止边框.但是,由于这个原因,小部件永远不会有焦点,因此不能捕获keyPressEvents.
• 这个(kludgy,imo)的解决方法是使用小部件的grabKeyboard类,如果我以后忘记释放Keyboard,这是危险的.这不是最佳选择.

那么问题是,有没有办法删除这个奇怪的(大多数只是丑陋的)虚线边框而不关闭我的应用程序中的所有内容的焦点？提前致谢!

我使用由纯CSS制作的梯形创建了一个圆形菜单,但是当我旋转它们时,Firefox在两侧显示一条线,在Opera上,所有梯形都有一个奇怪的背景/边框颜色,有点透明.梯形看起来像这样.

.trapezoid {
  width: 100px;  height: 0px;
  margin: 55px auto 0 auto;
  border-bottom: 140px solid black;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  transition: rotate (100deg);
}

Chrome和IE9都可以.我怎样才能找到解决这个问题的方法？

我想知道如何仅使用CSS创建以下效果:

期望的输出:

目前,我能想到的是在图像周围添加边框.但是我如何切割它们并在图像周围制作它们的部分呢？

这是我目前的CSS:

.avatar img {
    border-radius: 50%;
    border: solid 3px #65C178;
    border-width: 4px;
}

和HTML:

<div class="avatar"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/soffes/128.jpg" /></div>

预览:JSFiddle示例

这仅在头像图像周围给出边框,而不是具有白色间距的绿色部分.

如何使用xml布局在文本中添加边框

我已经尝试添加边框布局,但它与文本重叠.

我正在尝试创建与下图中显示的完全相同的内容.我也尝试过使用outline和offset方法的其他方法,但是我无法弄清楚如何继续这样做.

这是JSFiddle:

img {
  border: 4px solid green;
}

<img src="https://image.ibb.co/cxwWPa/services_gas_oil.jpg" alt="services_gas_oil" border="0">

如何在图像上获得此偏移边框？