纯css画fieldset

来源：互联网发布：人工智能龙头股代码编辑：程序博客网时间：2024/05/15 05:29

今天看到这样一个页面，心想看自己能不能用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>

效果图
这里写图片描述

阅读全文

0 0