老外版css样式控制圆角

最新推荐文章于 2021-12-20 17:45:00 发布

brock

最新推荐文章于 2021-12-20 17:45:00 发布

阅读量499

点赞数

分类专栏： css样式控制文章标签： css class xhtml html border div

本文链接：https://blog.csdn.net/zhdd1234/article/details/4190530

版权

css样式控制专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>老外用纯CSS实现的圆角 - http://www.codefans.net</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <style>
        .xsnazzy h1, .zsnazzy h1
        {
            margin: 0;
            font-size: 1.2em;
            padding: 0 10px 5px 10px;
            border-bottom: 1px solid #444;
        }
        .xsnazzy p, .zsnazzy p
        {
            margin: 0;
            padding: 5px 10px;
            font-size: 12px;
        }
        .xsnazzy
        {
            background: transparent;
            width: 240px;
            float: left;
            margin: 0 3px;
        }
        .xtop, .xbottom
        {
            display: block;
            background: transparent;
            font-size: 1px;
        }
        .xb1, .xb2, .xb3, .xb4
        {
            display: block;
            overflow: hidden;
        }
        .xb1, .xb2, .xb3
        {
            height: 1px;
        }
        .xb2, .xb3, .xb4
        {
            background: #fff; /* http://www.codefans.net */
            border-left: 1px solid #444;
            border-right: 1px solid #444;
        }
        .xb1
        {
            margin: 0 5px;
            background: #444;
        }
        .xb2
        {
            margin: 0 3px;
            border-width: 0 2px;
        }
        .xb3
        {
            margin: 0 2px;
        }
        .xb4
        {
            height: 2px;
            margin: 0 1px;
        }
        .xboxcontent
        {
            display: block;
            border: 0 solid #444;
            border-width: 0 1px;
            height: auto;
        }
        * html .xboxcontent
        {
            height: 1px;
        }
        .color_a
        {
            background: #c9ba65;
            color: #fff;
        }
        .color_b
        {
            background: #d4d8bd;
            color: #000;
        }
        .color_c
        {
            background: #758279;
            color: #fff;
        }
        .color_d
        {
            background: #b2ab9b;
            color: #000;
        }
    </style>
</head>
<body>
    <div class="xsnazzy">
        <b class="xtop"><b class="xb1"></b><b class="xb2 color_a"></b><b class="xb3 color_a">
        </b><b class="xb4 color_a"></b></b>
        <div class="xboxcontent">
            <h1 class="color_a">
                CodeFans.net</h1>
            <p>
                源码爱好者<a href="http://www.codefans.net">CodeFans.net</a>提供学习资料、程序源码、书籍教程等下载服务，做有质量的源码下载站。<br>
                <a href="http://codefans.net">Click here!</a>.</p>
        </div>
        <b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1">
        </b></b>
    </div>
</body>
</html>

brock

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
老外版css样式控制圆角

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> 老外用纯CSS实现的圆角 - http://www.codefans.net> .xsnazzy h1, .zsnazzy h1 { margin:
复制链接

扫一扫