[css 揭秘]:CSS揭秘 技巧(四):边框内圆角
2017-02-20 19:19
323 查看
我的github地址:https://github.com/FannieGirl/ifannie/
源码都在这上面哦!
喜欢的给我一个星吧
其实,以前我都是用两个div实现的。
描边 并不会跟着元素的圆角走(因而可以实现外层是直角),box-shadow 却是会的,因此把两者叠加到一起,box-shadow 会刚好填补 描边和容器圆角之间的空隙,这两者的组合达成了我们的理想效果。
例如:
演示地址:https://jsfiddle.net/Fannie/06sjmL6n/10/
这里引出了另一个问题了:到底多大的投影扩张可以填补这些空隙呢。
一般的情况下 还是用两个元素来实现吧。
后言:
如果你对基础的知识点已经很熟悉,你可以自动跳过。写上去的原因是查漏补缺,巩固一下基础。
如果有不对的地方,欢迎你来吐槽。
本文主要参考《CSS 揭秘》一书 以及w3school;
参考链接 :http://www.w3school.com.cn/cssref/pr_background-clip.asp
源码都在这上面哦!
喜欢的给我一个星吧
边框内圆角
问题:有时候我们需要一个容器,只在内侧有圆角,而边框或描边的四个角在外部仍然保持直角的形状。其实,以前我都是用两个div实现的。
解决方案
如果只需要达成简单的实色效果,我们还可以通过其他的方法。描边 并不会跟着元素的圆角走(因而可以实现外层是直角),box-shadow 却是会的,因此把两者叠加到一起,box-shadow 会刚好填补 描边和容器圆角之间的空隙,这两者的组合达成了我们的理想效果。
例如:
演示地址:https://jsfiddle.net/Fannie/06sjmL6n/10/
这里引出了另一个问题了:到底多大的投影扩张可以填补这些空隙呢。
简单的方法就是 直接使用圆角半径的一半
这个方法有点hack的味道。一般的情况下 还是用两个元素来实现吧。
后言:
如果你对基础的知识点已经很熟悉,你可以自动跳过。写上去的原因是查漏补缺,巩固一下基础。
如果有不对的地方,欢迎你来吐槽。
本文主要参考《CSS 揭秘》一书 以及w3school;
参考链接 :http://www.w3school.com.cn/cssref/pr_background-clip.asp
相关文章推荐
- [css 揭秘]:CSS揭秘 技巧(一):半透明边框
- [css 揭秘]:CSS揭秘 技巧(二):多重边框
- css技巧之如何实现ul li边框重合
- 黄聪:CSS+DIV 设置圆角边框加阴影效果
- 使用纯CSS实现圆角边框并完美兼容
- CSS揭秘之多重边框&连续的图像边框
- DIV+CSS圆角边框
- 纯CSS圆角边框
- CSS实现圆角的 25 种技巧分享
- 纯CSS圆角边框——让IE一边站
- 纯CSS圆角边框的一段代码
- DIV+CSS圆角边框(多种样式)
- CSS 圆角边框详解
- DIV+CSS圆角边框
- 完美的CSS无图片圆角边框效果[有效果图][兼容各个浏览器]
- DIV+CSS圆角边框
- 使用CSS实现圆角边框
- CSS实现边框圆角和阴影的属性
- DIV+CSS圆角边框
- CSS定义DIV圆角边框