标签: border

如何使用CSS删除框的底部边框

替代文字

我有一个长方形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;
}
Run Code Online (Sandbox Code Playgroud)

css border

17
推荐指数
3
解决办法
8万
查看次数

使用CSS使表格的外边框颜色与单元格的边框颜色不同

我想使用CSS来设置表格外边框的颜色......然后内部单元格会有不同的边框颜色......

我创建了这样的东西:

table {
     border-collapse:collapse;
     border: 1px solid black; 
}

table td {
     border: 1px solid red;
}
Run Code Online (Sandbox Code Playgroud)

问题是,桌子的颜色会变成红色,你可以在这里看到:http://jsfiddle.net/JaF5h/

如果表的边框宽度增加到2px,它将起作用:http://jsfiddle.net/rYCrp/

我一直在处理CSS和跨浏览器问题这么久......这是我第一次面对这样的事情而且我完全陷入困境......不知道该怎么做!

任何人都知道如何使用border-width进行修复:1px?

css border css-tables

17
推荐指数
3
解决办法
5万
查看次数

三面CSS边框

如果我想在三面都有边框,我是否需要为每一边声明边框,例如.

border-left:1px solid green;
border-bottom:1px solid green;
border-right:1px solid green;
Run Code Online (Sandbox Code Playgroud)

还是有任何捷径?

css border

17
推荐指数
3
解决办法
1万
查看次数

如何在表格的tbody/thead部分周围创建边框?

我正在尝试使用表格数据创建一个页面,该页面必须显示为多个表格.但是,我有四个相互矛盾的要求:

  1. 每个表必须有一个边框.
  2. 每个表的列宽必须能够根据内容重新调整大小.但是,列宽必须在所有表中保持一致.(即列的大小基于所有表中该列中的最大单元格).

为了处理第二个要求,我有一个单独的顶级表,其中包含多个thead和tbody部分.这完美地完成了#2.本质上,我在一个较大的父表中创建了多个伪表,分组为一个带有附带tbody的thead:

<table>
   <thead>
      table1 header content...
   </thead>
   <tbody>
      table1 body content...
   </tbody>
   <thead>
      table2 header content...
   </thead>
   <tbody>
      table2 body content...
   </tbody>
</table>
Run Code Online (Sandbox Code Playgroud)

现在,我试图解决第一个要求.每个伪表必须在其周围有一个边框,将其自身作为真正的表传递.

令我沮丧的是,我发现IE 6/7不允许在thead/tbody标签周围添加边框样式,或者我只是向thead和底部/左/右边框添加了一个上/左/右边框样式风格到tbody.

为那些解决#1的作品创建真正的表格和样式边框,但它打破了#2.

另一种方法是使用first-child和last-child样式来创建边框.不幸的是,这既不漂亮,也不适用于IE 6/7.

我一直在研究的另一个选择是在整个表周围创建一个边框,并尝试在伪表之间创建一行来创建我的分离,但是虽然我可以为它创建顶部/底部边框,但我还没有发现意味着擦除表格的左/右边界.那可能吗?

我的最后一个选择是创建用于绘制左,右,顶部和底部边框的类,设置适当的表格单元格以使用这些类.我知道这最终会起作用,但它非常笨重,并且会造成非常混乱的标记.Colgroups不能救我,因为他们无法处理边框样式.这是不幸的,因为它会使这个解决方案更容易忍受.

有没有更好的方法来完成我可能错过的边界?

html css html-table border

16
推荐指数
1
解决办法
2万
查看次数

如何使用内联样式格式化html表,使其看起来像渲染的Excel表格?

我目前卡在html表中设置边框.(我使用内联样式在电子邮件客户端中更好地呈现)我有这段代码:

<html>
    <body>
        <table style="border: 1px solid black;">
            <tr>
                <td width="350" style="border: 1px solid black ;">
                    Foo
                </td>
                <td width="80" style="border: 1px solid black ;">
                    Foo1
                </td>
                <td width="65" style="border: 1px solid black ;">
                    Foo2
                </td>
            </tr>
            <tr style="border: 1px solid black;">
                <td style="border: 1px solid black;">
                    Bar1
                </td>
                <td style="border: 1px solid black;">
                    Bar2
                </td>
                <td style="border: 1px solid black;">
                    Bar3
                </td>
            </tr>
            <tr style="border: 1px solid black;">
                <td style="border: 1px solid black;">
                    Bar1
                </td>
                <td style="border: 1px solid …
Run Code Online (Sandbox Code Playgroud)

html css html-table border

16
推荐指数
3
解决办法
15万
查看次数

如何在下拉菜单中修复此白点边框问题?

在我网站的下拉菜单中,元素的顶部,左右边框设置为灰色,底部边框设置为白色.这在FF3,Chrome中完美运行,可实现带有连续边框的漂亮下拉菜单.

但是,我在FF4 +和IE9 +的左侧看到一个白点

我认为问题是,在FF3中,左下角的像素被赋予与左边界相同的颜色.但在FF4中,左下角的像素与底部边框的颜色相同!

这看起来很难看.如何解决这个问题,以便下拉菜单的整个左侧是一条连续的灰线?

我在这里做的是,子菜单有一个完整的灰色边框.我想删除"项目"和子菜单本身之间的灰色边框,以便它们全部显示为具有连续边框且中间没有分隔的单个事物.所以我将"Projects"底部边框设置为白色并将其设置为与子菜单重叠1px.因此,子菜单的部分灰色边框消失,看起来是连续的.但是在FF4和IE9中,左下角和右下角的像素分别搞砸了.

将鼠标悬停在http://www.softinternals.com上的" 项目"菜单上,您可以在FF4的左侧边框中看到此信息.

以下是下拉菜单的屏幕截图:

Firefox 4:

Firefox 4截图

Internet Explorer 9

IE9截图


我做了更多的研究,发现了这个:

当应用单个像素厚边框时,每个浏览器和同一浏览器的每个版本似乎对于为角像素选择什么颜色有不同的想法.

Firefox 3

这就是我想要的:)它适合我的下拉菜单,因为左下角是从左边框拍摄的.

  • 左下角和右下角像素分别采用左右边框的颜色.
  • 顶部的两个角都采用顶部边框的颜色.
  • 任何角落都不会使用底边的颜色.

Firefox 3


Firefox 4

这不是我想要的:(

  • 每个角点像素采用前面的边框颜色,顺时针方向.

Firefox 4


Internet Explorer 8

也不是我想要的.

  • 与FF3类似,但左边不带任何东西.权利取得了所有.每个顶部和底部一个角落.

IE8


Chrome 11

有点接近我想要的:)

  • 每个角点像素的颜色是相邻边界的颜色的插值.

铬


Internet Explorer 9

我在拍摄截图时无法访问IE9,但它也应该以右下角的像素做不同的事情.


如您所见,每个浏览器关于角色的决定都是不同的.

为了让我的整个下拉菜单有1个连续的边框,我希望左下角和右下角的像素分别采用左右边框的颜色.有什么办法可以在主流浏览器中做到这一点吗?

如果没有,看看我的下拉菜单,你能否建议一些其他的方法来获得整个事物的单一连续边界,没有白点或中断任何地方?

html css border

16
推荐指数
1
解决办法
2727
查看次数

UIButton带渐变,圆角,边框和阴影

网站上有一些类似的问题,但我正在寻找具体而略有不同的东西.

我按照这里给出的指示:http://www.cimgf.com/2010/01/28/fun-with-uibuttons-and-core-animation-layers/ 来创建UIButton的子类,以便创建一个我可以使用的泛型类指定渐变颜色,而不是尝试使用静态图像.

我遇到了一个问题,其中按钮层上的setMasksToBounds将允许A)显示阴影,但也允许渐变层显示超出圆角或B)渐变层剪切到圆角,但不是允许投影显示

我对这个问题的解决方案看起来很笨重(尽管它有效)我想知道是否有人知道更好和/或更清洁的方法来完成同样的事情.这是我的代码:

CSGradientButton.h

#import <UIKit/UIKit.h>
@interface CSGradientButton : UIButton {
    UIColor *_highColor;
    UIColor *_lowColor;
    CAGradientLayer *gradientLayer;
    CALayer *wrapperLayer;
    CGColorRef _borderColor;
}

@property (nonatomic, retain) UIColor *_highColor;
@property (nonatomic, retain) UIColor *_lowColor;
@property (nonatomic) CGColorRef _borderColor;
@property (nonatomic, retain) CALayer *wrapperLayer;
@property (nonatomic, retain) CAGradientLayer *gradientLayer;

- (void)setHighColor:(UIColor*)color;
- (void)setLowColor:(UIColor*)color;
- (void)setBorderColor:(CGColorRef)color;
- (void)setCornerRadius:(float)radius;

@end
Run Code Online (Sandbox Code Playgroud)

CSGradient.m(有趣的部分,无论如何)

#import "CSGradientButton.h" 

@implementation CSGradientButton

...

- (void)awakeFromNib
{
    // Initialize the gradient wrapper layer
    wrapperLayer = [[CALayer alloc] init]; …
Run Code Online (Sandbox Code Playgroud)

gradient border shadow uibutton ios

16
推荐指数
2
解决办法
3万
查看次数

在HTML <area>元素上设置背景颜色?

有没有办法为HTML <area>元素设置背景颜色?我正在创建一个图像地图,当你将鼠标放在它们上面时,地图的某些部分会弹出一个工具提示,我认为如果我可以为<area>元素设置背景颜色那么你会看到很酷(也很方便)它们位于图像上方.

我尝试了背景颜色和边框,但都没有任何效果 - <area>元素仍然是"看不见的".我假设这是因为它<area>是一个自动关闭的标签,所以它实际上没有任何尺寸?但强迫高度和宽度也无济于事.

html border imagemap area background-color

16
推荐指数
1
解决办法
5万
查看次数

如何在android中使用ShapeDrawable以编程方式创建圆角边框?

我需要通过扩展ShapeDrawable以编程方式创建带圆角的边框.我需要一个带圆角的黑色边框,外面的像素是白色,内部像素是透明的.我目前的代码存在多个问题,其中的问题是它不会创建一个与边框厚度相同的平滑角,并且边框的外部像素是透明的而不是白色.

这是我目前得到的角落的图片 角

这是我在构造函数中为'fill'传递Color.TRANSPARENT的代码:

public class CustomShape extends ShapeDrawable {
 private final Paint fillpaint, strokepaint;
public CustomShape(int fill, int strokeWidth,int radius) {

    super(new RoundRectShape(new float[] { radius, radius, radius, radius, radius, radius, radius, radius }, null, null));
    fillpaint = new Paint(this.getPaint());
    fillpaint.setColor(fill);
    strokepaint = new Paint(fillpaint);
    strokepaint.setStyle(Paint.Style.STROKE);
    strokepaint.setStrokeWidth(strokeWidth);
    strokepaint.setColor(Color.BLACK);
}



@Override
protected void onDraw(Shape shape, Canvas canvas, Paint paint) {
    shape.draw(canvas, fillpaint);
    shape.draw(canvas, strokepaint);
}
Run Code Online (Sandbox Code Playgroud)

}

java android border drawable shapedrawable

16
推荐指数
2
解决办法
2万
查看次数

删除离子头中的边框底部

我试图在我的离子应用程序中删除离子头边框底部有问题

你可以在这里看到带边框的离子头

这是代码tab-home.html:

                <ion-view hide-nav-bar="true">
            <ion-header-bar align-title="left" class="bar-transparent" >
            <button menu-toggle="left" class="button button-icon ion-ios7-settings">
            </button>
            <div class="title">&nbsp;</div>
            <h1 class="title">proximiti</h1>
            </ion-header-bar>
            <!--<ion-nav-bar class="bar-transparent">
            </ion-nav-bar>-->
            <ion-pane ng-controller="CardsCtrl">
            <!--<ion-nav-buttons side="left">
            <button menu-toggle="left" class="button button-icon ion-navicon"></button>
            </ion-nav-buttons>-->
            <td-cards>
            <td-card ng-repeat="card in cards" on-destroy="cardDestroyed($index)" on-swipe-left="cardSwipedLeft($index)" on-swipe-right="cardSwipedRight($index)" on-partial-swipe="cardPartialSwipe(amt)" class="card-{{card.index}}" ng-controller="CardCtrl">
            <div class="image">
            <!--<div class="yes-text" ng-style="leftTextOpacity">LIKE</div>-->
            <img ng-src="{{card.image}}">
            <!--<div class="no-text" ng-style="rightTextOpacity">NOPE</div>-->
            </div>
            </td-card>
            </td-cards>
            </ion-pane>
            </ion-view>
Run Code Online (Sandbox Code Playgroud)

正如您在这里看到我们感兴趣的部分:

                <ion-view hide-nav-bar="true">
            <ion-header-bar align-title="left" class="bar-transparent" >
            <button menu-toggle="left" class="button button-icon ion-ios7-settings">
            </button>
            <div class="title">&nbsp;</div>
            <h1 class="title">proximiti</h1>
            </ion-header-bar>
Run Code Online (Sandbox Code Playgroud)

我尝试了一切(在浏览器中我没有看到这个边框!),但没有什么可以改变它!有人可以帮我试图找到删除边框的方法吗?注意:还尝试编辑ionic.css并仅在浏览器中更改.

编辑:它应该只在这个视图中隐藏,所以类是透明的

html css border ionic-framework

16
推荐指数
6
解决办法
3万
查看次数