边框内圆角

最新推荐文章于 2020-11-27 17:09:48 发布

bluellow

最新推荐文章于 2020-11-27 17:09:48 发布

阅读量341

点赞数

分类专栏： CSS3 文章标签： CSS3 边框内圆角 border shadow

本文链接：https://blog.csdn.net/bluellow/article/details/52677153

版权

CSS3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

边框内圆角效果图

这里写图片描述

解决方案

两个元素的div方案
border-shadow

两个元素的div方案

这个方案应该大家都熟悉了，这里就不详细叙述，具体看源码。

border-shadow方案

border-shadow详细用法
borser-shadow用法连接
用border-shadow来做边框内圆角，这个写法有限制：
1:border-shadow扩张的半径要比outline的宽度小，
2:要比 (根号2-1)r 要大(此r是border-radius的半径)

案例源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框内圆角 </title>
    <style>
        .div_1{
            margin: 0 10px;
            display: inline-block;
            background: #655;
            padding:13px;
        }
        .div_1 > div{
            display: inline-block;
            background: tan;
            border-radius: 13px;
            padding: 16px;
            /*width: auto;*/
        }
        .div_2{
            display: inline-block; /*使div自设应文字的宽度*/
            background: tan;
            border-radius: 13px;
            padding: 16px;
            box-shadow: 0 0 0 10px #655;
            outline: 13px solid #655;
        }
    </style>
</head>
<body>
    <!--用两个元素的写法-->
    <div class="div_1">
        <div>人生若只如初见，
            <br>
            当时只道是寻常。
        </div>
    </div>
    <!--只用一个元素的作法-->
    <div class="div_2">
        人生若只如初见，
        <br>
        当时只道是寻常。
    </div>
</body>
</html>

bluellow

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
边框内圆角

边框内圆角效果图解决方案两个元素的div方案 border-shadow 两个元素的div方案这个方案应该大家都熟悉了，这里就不详细叙述，具体看源码。border-shadow方案 border-shadow详细用法 borser-shadow用法连接用border-shadow来做边框内圆角，这个写法有限制： 1:border-shadow扩张
复制链接

扫一扫