草庐IT

Border-Radius

全部标签

html - border-radius 在 safari 下失败(丑陋的剪裁)

有人知道在Safari中出现“错误”的解决方法吗?当我使用border-radius在CSS3中创建圆Angular边框时,它在Safari、FF等平台上运行良好。但是当border-color是背景颜色时,您可以看到容器背景与边框重叠。您可以在这里尝试:http://de.roundedcorner.org/css3-rounded-corner-generator只需将边框颜色和网站背景设置为#333333感谢您的帮助! 最佳答案 这很可能是由于背景剪切。以下应该更正。-moz-background-clip:padding;-

html - CSS 过渡 : Border Slides Instead of Fading

我设计了一个链接,当你悬停它时,顶部会出现一个边框;当您将鼠标悬停在边界外时,边界将随着过渡消失。当您将鼠标悬停在边框上然后关闭时,边框会滑入而不是淡入。我希望边框淡入而不是滑动。我怎样才能做到这一点?这是一个JsFiddleHTMLTextCSSdiv{line-height:50px;width:100px;text-align:center;cursor:pointer;transition:border.2sease-in-out;-webkit-transition:border.2sease-in-out;-moz-transition:border.2sease-in-o

html - 使用比元素尺寸大得多的 CSS border-radius

使用比元素尺寸大得多的border-radius有什么问题吗?例如,如果我想创建一个.circle类,如下所示:.circle{-webkit-border-radius:1000px;-moz-border-radius:1000px;border-radius:1000px;}所以现在我可以将这个类应用于任何元素以使其成为一个圆圈,如下所示:我知道到目前为止我还没有遇到任何问题,但我是否只是在为以后遇到更多问题做准备? 最佳答案 这里完全没有问题。您可以在任何您喜欢的地方自由申请该类(class),真的没有问题。小于(高度或宽度

html - CSS中border-bottom的 flex 端

我想让我的边框底部看起来像这样:有一个flex的末端。目前它看起来像这样:我尝试使用的CSS是border-bottom-right-radius:10px;。代码如下所示:loremipsum.title{border-bottom:10pxsolid$mainRed;border-bottom-right-radius:10px;}我还尝试了border-radius:10px;这给了我相同的结果,只是两端都是flex的。增加这个数字只会使直线向上倾斜。如何使线条看起来正确? 最佳答案 这在默认边框内是不可能的,因为border

html - Firefox : border-color, border-radius 和背景颜色创建参差不齐的边缘和空白

看看下面的HTML和CSS。.box{border-radius:15px;border:#333solid3px;background:#333;}Helloworld它在Firefox中产生这个:如您所见,div的边框和背景留下了可见的微小间隙。由于具有不同背景颜色的悬停状态,我需要边框。我该如何克服这个问题? 最佳答案 这很可能是Firefox中的错误。你可以做一个简单的技巧来解决这个问题:(这不是最好的解决方案,我知道,但问题似乎很严重)标记:通过“包装”div的假边框Helloworldcss:填充就可以了.wrapper

HTML/CSS : Vertical border overlapping horizontal border

这是fiddle:http://jsfiddle.net/AV38G/HTMLSomeFoobarStufffoobarraboof184bar87458184874rabooffoobarCSS:/*ACTUALCSS*/table{width:300px;border-collapse:collapse;}trtd.first-column{border-left:none;}tr.first-line{border-bottom:3pxsolidgreen;border-top:none;}tr.first-linetd{border-left:none;}td{border-l

html - border-width 中的 CSS calc()?

我可以使用带边框宽度的calc()吗?我希望以下CSS能够工作:.my-element{border-left-width:calc(10%+10px);border-right-width:calc(10%+20px);}但无论出于何种原因,我提供的任何值calc()结果根本没有边界。我在MDN上找到的文档不清楚是否可以使用calc-它说我应该使用Anyvalue,但这是否包括计算?我的目标是IE9,但我在Chrome34和Firefox28中得到了相同的结果。我知道我总是可以使用jQuery来实现这些事情,但我想尽可能避免它。 最佳答案

html - -webkit-border-radius 不能正确裁剪图像

我有5个浏览器用于呈现html编码的页面:IE9、Firefox4.0和所有最新版本的Chrome、Safari和Opera。现在在IE9和Firefox4.0中使用border-radius:和-moz-border-radius:可以正确裁剪图像,但在Opera、Chrome和Safari中使用-webkit-border-radius:会失败。在Opera中,图像根本没有被裁剪,而在Safari和Chrome中,图像被裁剪了一些,但边框也被裁剪掉了。.nonTyp{margin:15px15px15px15px;border:4pxinset#C1C8DD;border-radi

javascript - CSS/JavaScript : How to draw minimal border around an inline element?

考虑以下HTML:Thisisapotentiallylargeparagraphoftext,whichmaygetwrappedontoseverallineswhendisplayedinthebrowser.Iwouldliketobeabletodrawaminimalboxroundthespan我想在跨度周围绘制一个最小边框。即:如果span在单行上渲染,border相当于设置了一个css样式的border:1pxsolidblack;如果跨度呈现在多行上,则边框绘制在跨度的最外边缘周围,而不是跨度之间。这相当于在span上设置CSS背景颜色,并在突出显示区域的边缘绘制线

html - 为什么 border-color 不传播到子元素?

我有一个我正在构建的网站,它具有深度嵌套的div,并使用用户可选择的主题。我的问题是......为什么border-color不传播到子元素?我已经在处理DOM样式表了,所以添加一个循环来更新边框颜色不会有什么困难。然而我很好奇为什么标准(Linux中的Firefox和Chrome)边框颜色不从父级继承,而是默认为文本颜色,而边框样式仍然不会默认为纯色?这种行为背后有什么智慧吗?我不是想变得狡猾。我真的很好奇为什么这似乎是“设计使然”。在撰写本文时,我意识到最简单、最灵活的解决方案是将我的元素定义为class="classnameborder",然后更新边框类以反射(reflect)正