span{
display: block;
background: #f4f4f4;
color: #333;
font-size: 14px;
-webkit-border-radius: 20px;
border-radius: 20px;
text-align: center;
height: 32px;
line-height: 32px;
margin-right: 10px;
padding: 0 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 4em;
}
.span1{
/*
在 M7007 下背景色会超出圆角
border: 1px solid #ededed;
*/
border: 1px solid #ededed;
}
.span2{
border: none;
box-shadow: 0 0 0 1px #ededed;
}
<br>
<span class="span1">一些文案</span>
<br>
<span class="span2">一些文案</span>
可以第一个span的背景色超出了border-radius定义范围
可能的解释:
border-radius定义了border的圆角,未定义span的圆角范围
修改为:
不设置border,则border-radius对整个span生效。再加box-shadow实现border效果
- 大小: 3.7 KB
分享到:
相关推荐
让IE实现CSS3中的border-radius(圆角)
解决border-radius失效问题
让IE6也识别CSS3-圆角效果应用border-radius
border-radius CSS3中的代表——第一个在社区中得到广泛使用新属性。这意味着,除去Internet Explorer 8及更低版本,所有的浏览器可以显示圆角。为了使样式能正确应用,需要为Webkit和Mozilla内核添加前缀。 CSS ...
引入PIE.htc使ie7,ie8 支持css3 border-radius圆角效果
border-radius失效
前面系统总结了CSS3中Gradient和RGBA的用法,今天我们在一起来看看CSS3中制作圆角的属性border-radius的具体用法。在CSS2中,大家都碰到过圆角的制作。当时,对于圆角的制作,我们都需要使用多张圆角图片做为背景,...
css3的 border-radius 为了兼容ie8浏览器所用到的插件以及实例。为什么要50个字节啊,竟然不能设置成免费。。
-moz-border-radius: 32px; -webkit-border-radius: 32px; border-radius: 32px; behavior: url(border-radius.htc); 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” ...
border_radius属性画出水滴样式
01-边框圆角border-radius.html
border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */ 不要以为border-radius的值只能用px单位,你还可以用...
可以实现IE9以下版本CSS圆角效果与图片显示投影等功能。
css3教程应用css3 圆角border-radius属性制作...
CSS属性之border-radius的教导性资源,里面详细介绍了border-radius的用法,有利于css的基础学习,适用于新手小白观看,可以帮助小白更快速全面的了解border-radius属性。
用CSS3的border-radius属性来制作圆角边框相当顺手,然而浏览器的兼容问题并不是太好处理,这里我们就来总结一下border-radius以外的CSS圆角边框制作方法.
主要介绍了CSS3使用border-radius属性制作圆角,并附上示例代码,推荐给有相同需求的小伙伴。
有什么用?... border-radius: 50%; } 上述50%就是说设置各边圆角都为50%。 那么如何画个半圆? 如下,把宽度设置为高度的两倍。 #demo2 { width:100px; height:50px; background:green; bo