border-radius背景色超出圆角问题解决
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>
在M7007手机上显示效果:
可以第一个span的背景色超出了border-radius定义范围
可能的解释:
border-radius定义了border的圆角,未定义span的圆角范围
修改为:
不设置border,则border-radius对整个span生效。再加box-shadow实现border效果
border-radius背景色超出圆角问题解决的更多相关文章
- CSS魔法堂:重拾Border之——不仅仅是圆角
前言 当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...
- jquery easyui中的dialog拖动超出浏览器问题解决办法
juqery easyui当鼠标点着拖动超出浏览器后,就回不来了,拉不下的问题: //控制dialog超出浏览器回到原来的地方 var default_left; var default_top;// ...
- compass模块
Compass核心模块Reset :重置CSS模块 @import "compass/reset" Layout :页面布局的控制能力 @import "compass/ ...
- iOS 高效添加圆角效果实战讲解
圆角(RounderCorner)是一种很常见的视图效果,相比于直角,它更加柔和优美,易于接受.但很多人并不清楚如何设置圆角的正确方式和原理.设置圆角会带来一定的性能损耗,如何提高性能是另一个需要重点 ...
- iOS开发-添加圆角效果高效实现
圆角(RounderCorner)是一种很常见的视图效果,相比于直角,它更加柔和优美,易于接受.但很多人并不清楚如何设置圆角的正确方式和原理.设置圆角会带来一定的性能损耗,如何提高性能是另一个需要重点 ...
- Qt 圆角按钮,面版自动布局
一.前言 在部分界面开发中,有时需要动态添加控件或按钮到面板中,在不需要时又需要删除该控件,故模仿视频开发中的设置屏蔽词,通过自己绘制的按钮与排布面板控件实现. 实现效果如下: 说明: 1.输入框可设 ...
- 个性二维码开源专题<液化/圆角/效果>
基础方法: ChangeFillShape //修改填充形状 ChangeFillShape(...) // 摘要: // 修改填充形状 // // 参数: // g: // 图形画板 // // F ...
- 重温CSS:Border属性
边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...
- WPF 圆角输入框
今天打算来做一个圆角的输入框 默认输入框: 这个输入框不好看,并且在XP 跟 WIN 7 WIN10 效果 都不太一样 我们今天不用模板的方式,而是 最简单的方式 来实现 圆角 输入框: ----- ...
随机推荐
- css 温故而知新 字体方向 将文字竖着显示
writing-mode: vertical-rl;
- ipod classic 检查硬盘方法
长按(中间键+MENU)重启接着按(中键+左键)一直进入工程模式进入后顺序是:menu-IO-HARDDRIVE-HDSMARTDATA 就可以看到了. retracts--硬盘磁头非正常退回,比如硬 ...
- MySQL各类日志文件相关变量介绍
文章转自:http://www.ywnds.com/?p=3721 MySQL各类日志文件相关变量介绍 查询所有日志的变量 1 mysql> show global variables li ...
- Android应用一般上架流程
Android App上架所需文件 上架准备 App文件: 1. 安装包 2. 应用商标:图片格式KB. 3. 应用截图(4~6张):图片格式JPG或者PNG.图片大小480*800,且每张大小一致 ...
- octave画心形曲线
octave是gnu出品和matlab兼容的科学计算软件,具有体积小,兼容性好,免费的优点. 心形曲线是根据函数:( x2 + y2 -1 )3 - x2y3=0 改编而成. clear all; c ...
- /etc/sudoers文件设置为允许用户在不输入该用户的密码的情况下使用所有命令
设置用户666在不输入该用户的密码的情况下使用所有命令: /etc/sudoers ALL=(ALL) NOPASSWD:ALL # ALL=(ALL) ALL #sudo su - 时是需要输入66 ...
- linux命令(44):sed,vim;去掉文件中的^M 符号,去掉行首空格和制表符
注:下面的直接粘贴会出错,要重新输入^M 如何输入^M,先 ctrl+v,然后 ctrl+m 第一种方法: cat -A filename 就可以看到windows下的断元字符 ^M要去除他,最简单用 ...
- Android 编程下实现 Activity 的透明效果
实现方式一(使用系统透明样式) 通过配置 Activity 的样式来实现,在 AndroidManifest.xml 找到要实现透明效果的 Activity,在 Activity 的配置中添加如下的代 ...
- 【Web】Tomcat中利用Session识别用户的基本原理
HTTP无状态的特性与Session.Cookie的存在 HTTP有一个特性:无状态的,就是前后两个HTTP事务它们并不知道对方的信息. 而为了维护会话信息或用户信息,一般可用Cookie或Sessi ...
- Delphi下IOCP开源框架:DIOCP 成功应用案例分享
首先说明,该项目不是本人的项目,本文转自盒子. 该项目使用的DIOCP版本为1.0,目前diocp为3.5 以下是盒子的原文 ------------------------------------- ...