CSS揭秘之《边框内圆角》

Anshiii 发布于2019-08-29 13:20 / 3304人阅读

摘要：现在我们要实现一个边框内圆角的效果，效果图如下所示第一反应肯定是用两个标签来实现，但是如果只用一层标签的话，可以实现么我们首次的构想可能是这样子的然后运行一看效果是这样的因为不跟着描边走的，所以能够实现直角效果，但是显示还缺少点什么

现在我们要实现一个边框内圆角的效果，效果图如下所示：

第一反应肯定是用两个标签来实现，但是如果只用一层标签的话，可以实现么
我们首次的构想可能是这样子的

        div {
            outline: .6em solid green;
            max-width: 10em;
            border-radius: .8em;
            padding: 1em;
            margin: 1em;
            background: red;
            font: 100%/1.5 sans-serif;
        }

然后运行一看效果是这样的：

因为outline不跟着描边border-radius走的，所以能够实现直角效果，但是显示还缺少点什么才能让白色圆角突兀效果去掉
这里需要明白两点：
1、box-shadow可以跟着描边效果走
2、box-shadow扩展半径公式为

所以最终我们的代码是：

        div {
            outline: .6em solid green;
            box-shadow: 0 0 0 .4em green;
            /* todo calculate max of this */
            max-width: 10em;
            border-radius: .8em;
            padding: 1em;
            margin: 1em;
            background: red;
            font: 100%/1.5 sans-serif;
        }

具体效果见链接

GPU云服务器云服务器内凹圆角，css3 在html中内边框云之盟国内服务器大揭秘

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112531.html

CSS揭秘之《边框内圆角》

摘要：现在我们要实现一个边框内圆角的效果，效果图如下所示第一反应肯定是用两个标签来实现，但是如果只用一层标签的话，可以实现么我们首次的构想可能是这样子的然后运行一看效果是这样的因为不跟着描边走的，所以能够实现直角效果，但是显示还缺少点什么现在我们要实现一个边框内圆角的效果，效果图如下所示：showImg(https://segmentfault.com/img/bVUhfH?w=230&h...

cnio 2019-08-20 19:08 评论0 收藏0
CSS揭秘之《多重边框》

摘要：还接受第四个参数称作扩张半径，通过指定正值或负值，可以让投影面积加大或者减小如果我们想要一道实线边框其实也是可以通过来模拟，原理就是一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值其实也能实现上述实线效果而且似乎挺简单，但是却 1、box-shadow还接受第四个参数（称作扩张半径），通过指定正值或负值，可以让投影面积加大或者减小2、如果我们想要一道实线边框其实也是可以通过b...

sixgo 2019-08-20 19:08 评论0 收藏0
CSS揭秘之《多重边框》

摘要：还接受第四个参数称作扩张半径，通过指定正值或负值，可以让投影面积加大或者减小如果我们想要一道实线边框其实也是可以通过来模拟，原理就是一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值其实也能实现上述实线效果而且似乎挺简单，但是却 1、box-shadow还接受第四个参数（称作扩张半径），通过指定正值或负值，可以让投影面积加大或者减小2、如果我们想要一道实线边框其实也是可以通过b...

codeGoogle 2019-08-29 13:20 评论0 收藏0