标签: border

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

我按照这里给出的指示: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

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

#import "CSGradientButton.h" 

@implementation CSGradientButton

...

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

看看这个:http://jsfiddle.net/wjhnX/

我用这个CSS实现了它:

background-image: radial-gradient(#CCC, #FFF), radial-gradient(#CCC, #FFF);
background-size:    2px 100%;
background-position: 0 0, 100% 0;
background-repeat:  no-repeat;

这可能吗,但模拟的边界将是顶部和底部,而不是左右？

谢谢!

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

这是代码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>

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

                <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>

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

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

每当非整数像素值用于元素的边界时,浏览器只是将该值截断为整数.为什么会这样？

我知道边框实际上不会占用像素的一部分,但这些类型的值有时会与其他值组合使用以形成完整像素.例如,宽度为1.6px的左右边框应使元素的总宽度增加3px.这是有效的,因为完整值存储在内存中并用于计算.

但是,即使宽度,填充和边距都表现正确,渲染边框时似乎也不是这种情况.

var div = document.getElementsByTagName('div'),
    len = div.length,
    style;
for (var i = 0; i < len; i++) {
    style = getComputedStyle(div[i]);
    div[i].innerHTML = div[i].className + ': ' + style.getPropertyValue(div[i].className) + '<br>height: ' + style.getPropertyValue('height');
}

div {
    width: 300px;
    border: 1px solid black;
    padding: 50px 0;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
div.width {
    width: 300.6px;
}
div.padding-top {
    padding-top: 50.6px;
}
div.margin-top {
    margin-top: 0.6px;
}
div.border-top-width {
    border-top-width: …

我想知道是否有可能在纯CSS中制作一个带圆角的方形和一个缩进的边框.

目前我有这个:

#custom-square {
     position: relative;
     display: block;
     width: 75px;
     height: 75px;
     border: 2px solid #8A6EF1;
     border-radius: 10px;
     background-color: white;
}

如何在Android中创建任意形状的动画虚线或虚线边框？在XML(首选)或以编程方式.

有关示例,请参见下图.

在Android中,如何在文本周围添加边框？我希望TextView中的文本边框不在TextView 周围.有什么方法可以做到吗？如果是这样,请指出我需要做的正确步骤..

我已经在我的网站上添加了一个正常的方形图像并将其变成了一个带有border-radius的圆圈,然后尝试在它周围添加一个圆形边框,但它似乎只适用于Chrome.有关如何解决此问题的任何建议？

.face {
display: block;
margin: auto;
border-radius: 100%;
border: 5px solid #ff675b;}

以下是该问题的屏幕截图:https: //www.dropbox.com/s/4xy26phkjgz9te0/Screen%20Shot%202013-05-01%20at%2001.15.02.png

由于D3js,我将SVG元素注入网页.由于语法类似,我很难设计这些元素的样式

path { border: 3px solid green; }

不起作用.

如何使用CSS为网页中的SVG元素添加边框/轮廓/笔划？

我有以下布局:

#limited-width {
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
  font-size: 18px;
}
ul {
  display: flex;
  flex-flow: row wrap;
  list-style: none;
  padding: 0;
  margin: 20px;
}
ul > li {
  display: block;
  text-align: center;
  flex: 1 0 auto;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 4px 7px;
  border: 2px solid rgba(0,0,0,.3);
  background-color: rgba(0,0,0,.03);
}

<div id="limited-width">
  <ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Pineapple</li>
    <li>Banana</li>
    <li>Tomato</li>
    <li>Pear</li>
    <li>Lemon</li>
  </ul>
</div>

如您所见,其中的列表项ul具有宽度为的边框2px,但正因为如此,元素之间的边界加倍.我正在寻找一种方法,使边框在元素之间的宽度相同,同时border-collapse使用flexbox 保持外部边框相同(类似于在桌子上工作的方式).这是可能的,如果是的话,怎么样？