纯css画fieldset

最新推荐文章于 2023-11-15 09:33:41 发布

WiFi_Uncle

最新推荐文章于 2023-11-15 09:33:41 发布

阅读量1k

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/wx11408115/article/details/78130084

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

今天看到这样一个页面，心想看自己能不能用css把它画出来。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>纯css画fieldset</title>
    <style type="text/css">
        .fieldset {
            border: #FE740F 3px solid;
            border-radius: 3px;
            padding: 10px;
            margin: 0 auto;
            margin-top: 100px;
            width: 600px;
            height: 300px;

        }
        .fieldset legend{
            text-align: center;
            padding: 0px;
            background: #FE740F;
            color: #fff;
            height: 32px;
         }
         .fieldset legend:before,
         .fieldset legend:after{
            display: inline-block;
            content: "";
            width: 20px;
            height: 0px;
            border-top: 16px solid transparent;
            border-bottom: 16px solid transparent;
            background-color: #fff;
            position: relative;
            top: -6px;
         }
        .fieldset legend:before {border-right: 23px solid #FE740F;}
        .fieldset legend:after {border-left: 23px solid #FE740F;}
         .fieldset legend h4 {
            display: inline-block;
            height: 20px;
            position: relative;
            bottom: 16px;
            padding: 0px 22px;
            font-weight: 500;


         }
    </style>
</head>
<body>
    <div class="intro">
        <fieldset class="fieldset">
            <legend><h4>纯css画fieldset</h4></legend>
            <p>
            </p>
        </fieldset>
    </div>
</body>
</html>

效果图
这里写图片描述

WiFi_Uncle

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯css画fieldset

纯css+ legend +fieldset 漂亮区域今天看到这样一个页面，心想看自己能不能用css把它画出来。 <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>纯css画fieldset</title>
复制链接

扫一扫