css3揭秘读书笔记--边框内圆角

边框内圆角

首先假设一个场景：需要一个容器，只在内测有圆角，而边框或描边的四个角在外部任然保持直角的形状。实现方式如下所示：

<div class="out" style="width:100px;height:50px;background:#655;padding:10px;"><div class="in" style="background:tan;line-height:50px;text-align:center;border-radius:10px;">圆角边框</div>
</div>

这种方式设计的较为巧妙，他的边框并非通过border来设置，如果通过border来设置，圆角与边框之间会有分析的。他是通过设置父元素的背景色，然后通过padding来挤压子元素，形成边框的效果。

还有一种方式也是颇为巧妙，代码如下；

<div style="width:100px;height:50px;line-height:50px;text-align:center;background:tan;border-radius:10px;box-shadow:0 0 0 10px #655;outline:10px solid #655;">圆角边框
</div>

这种方式主要通过outline描一个10px的边框，由于outline是根据border走的，会留下四个空隙，在使用box-shadow阴影来填补空隙，box-shadow是根据内容走的，正好可以形成边框的效果。

这两种画边框的方式，有一个共同点：都不增加盒子的大小，并不是真正的边框，根据盒模型的原理，增加border，是会改变盒子的大小的。而上述两种方式都是在元素本身的基础上来向外延申，并不会挤压其元素的空间，也就是两种都不会影响布局。

转载于:https://www.cnblogs.com/OnePieceKing/p/11214442.html

css3揭秘读书笔记--边框内圆角相关推荐

css 揭秘-读书笔记
css 揭秘 [希]Lea verou 著 css 魔法译该书涵盖7大主题,47个css技巧,是css进阶必备书籍,开阔思路,探寻更优雅的解决方案.这本书完全用css渲染出的html写成的(布局. ...
CSS实现边框内圆角
CSS实现边框内圆角先上效果图: 要想实现上图所示的效果,我们首先想到的是通过两个元素定义不同的背景色和边框样式来实现,这是十分简单的一种实现方式,但是要求我们使用两个元素,如果只用一个元素能不能实 ...
微信小程序 css圆角,微信小程序界面设计小程序中CSS3样式精通课程-边框-border-radius 圆角边框...
border-radius 圆角边框通用语法浏览器支持微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangj ...
Spring揭秘读书笔记三 bean的scope与FactoryBean
本书可作为王富强所著<<Spring揭秘>>一书的读书笔记第四章 BeanFactory的xml之旅 bean的scope scope有时被翻译为"作用域&quo ...
响应式Web设计：HTML5和CSS3实战读书笔记
响应式Web设计:HTML5和CSS3实战 Responsive Web Design with HTML5 and CSS3 By : Pandao pandao####vip.qq.com ...
css3实现0.5px边框、圆角渐变色边框+圆角渐变色背景
效果图 0.5px边框 0.5px边框,可以用伪元素实现,before.after都可以.移动端H5页面用的比较多. 圆角渐变色边框+圆角渐变色背景实现外部圆角边框,内部圆角渐变色背景,是用父div ...
网络扫描技术揭秘读书笔记1--简介
1.主机与网络安全问题的发现与解决作为一个用户,自己的主机是否安全:作为网络管理员,所管理和维护的网络是否安全,解决这些问题除了及时打上操作系统的最新补丁以及安装防火墙和防病毒软件之外,是否还有别的 ...
ASP.NET 3.5揭秘-读书笔记1
ASP.NET和.NET Framework ASP.NET是微软.NET Framework的一部分..NET Framework由两部分组成:框架类库(Framework Class Librar ...
web前端黑客技术揭秘读书笔记
2019独角兽企业重金招聘Python工程师标准>>> 关于sql注入正常sql : select username,email from users where id=1 ; ...
网络扫描技术揭秘读书笔记3--TCP SYN扫描
TCP SYN扫描(使用Winpcap库实现) 0.核心原理半开扫描(TCP SYN)不同于CSocket和Socket2扫描,后两者扫描都是完成了一个完整的三次握手(即connect函数),而半开 ...

css3揭秘读书笔记--边框内圆角

css3揭秘读书笔记--边框内圆角相关推荐

最新文章

热门文章