css效果之边框内圆角
发布时间:2019-06-19 16:22:14 作者:水镜月
我要评论

这篇文章主要介绍了css效果之边框内圆角的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
本文主要介绍了css效果之边框内圆角,分享给大家,也给自己留个笔记,具体如下:
效果如下
你可能想到的方法
padding: 16px; box-shadow: 0 0 0 8px #655; border-radius: 5px;
如果采用上面的方式,会产生一个与上面效果很像的效果:内外都是圆角。下过如下
如何将外面的那层shadow变为直角呢?
其关键就是outline和box-shadow属性:元素的圆角无法规定描边的方式
那么你可能会想到这样的实现方式
padding: 16px; outline: 8px solid #655 border-radius: 5px;
然后当你满怀自信去查看效果时发现,居然又不是你想要的效果,你会发现内外之间会有一小点空白。
那怎么办,是不是bug?虽然元素的圆角无法规定描边的角的样式,但可以规定box-shadow的角的样式,于是解决方式诞生了:让box-shadow与outline重合,outline将box-shadow的圆角填充成直角,box-shadow填充outline与内层之间的空白
padding: 16px; box-shadow: 0 0 0 8px #655; border-radius: 5px; outline: 8px solid #655;
这时再去刷新浏览器就会发现会是我们想要的效果了
附一个完整的例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>css learning</title> <style> .section { display: inline-block; width: 200px; background: gray; padding: 16px; box-shadow: 0 0 0 8px #655; border-radius: 5px; outline: 8px solid #655; } </style> </head> <body> <div class="container"> <span class="section"> Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. </span> </div> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 这篇文章主要介绍了通过CSS边框实现三角形和箭头的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下2020-01-15
CSS3径向渐变radial-gradient实现波浪边框和内倒角的方法
这篇文章主要介绍了CSS3径向渐变radial-gradient实现波浪边框和内倒角的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友2019-02-19- 这篇文章主要介绍了CSS圆角边框制作指南与实例,这里突出讲解了以纯代码实现的小圆角 来消灭锯齿的方法,需要的朋友可以参考下2016-03-10
- css圆角卷起了一阵风波,只用css来做圆角矩形的技术很早就有了,但是在网页的设计过程中,我们通常用图片实现圆角矩形效果。现在网上很多关于无图片实现css圆角矩形的方法,虽2013-03-25
- 这篇文章主要介绍了css 边框添加四个角的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-10-14
最新评论