• 用CSS作圓邊方塊


    這幾天在用公司網站的版型,多半都是拿Google來作參考,看到Google很多圓邊方塊的效果,都是用CSS做出來的,比我以前還用Table+Image,這一招實在是太好用了,分享給大家。

    效果如下:

    image

    CSS:

    <style type="text/css">
    .roundBorder
    {
        display: block;
    }
    .roundBorder *
    {
        background: white;
        display: block;
        height: 1px;
        overflow: hidden;
    }
    .roundBorderLayer1
    {
        border-left: 1px solid #C4C4C4;
        border-right: 1px solid #C4C4C4;
        margin: 0px 1px;
    }
    .roundBorderLayer2
    {
        border-left: 1px solid #D3D4D5;
        border-right: 1px solid #D3D4D5;
        margin: 0px 2px;
        padding: 0px;
    }
    .roundBorderLayer3
    {            
        background: #C4C4C4;
        border-left: 1px solid #D3D4D5;
        border-right: 1px solid #D3D4D5;
        margin: 0px 3px;
    }
    .roundContent
    {
        background:white;
        border-left: 1px solid #C4C4C4;
        border-right: 1px solid #C4C4C4;
        overflow: hidden;
        padding: 4px 10px;
    }
    </style>

    HTML:

    <b class="roundBorder">
        <b class="roundBorderLayer3"></b>
        <b class="roundBorderLayer2"></b>
        <b class="roundBorderLayer1"></b>
    </b>
    <div class="roundContent">
        Hello!!
        <br/>
        用CSS來作圓邊方塊
        <br/>
        真的很簡單
    </div>
    <b class="roundBorder">
        <b class="roundBorderLayer1"></b>
        <b class="roundBorderLayer2"></b>
        <b class="roundBorderLayer3"></b>
    </b>

    class說明

    roundBorder 的作用為群組下面的三個Layer

    roundBorderLayer1 的作用為左右margin 1px與左右border 1px

    roundBorderLayer2 的作用為左右margin 2px與左右border 1px

    roundBorderLayer3 的作用為左右margin 3px與左右border 1px ,而效果的上下邊線是用background完成。

    roundContent 的作用為左右margin 0px與左右border 1px

    它的組成就是

    image

    CSS說明

    其實所用的CSS也不是很複雜

    display: block; 顯示成區塊(因為b是inline,用div就不用加這段,而Google為什麼不用div而用b,我猜有隱喻Border與字數少的關係吧)。

    height: 1px; 高設成1px。

    overflow: hidden; 超出了就隱藏,不加也無所謂,如是怕b有內容出問題而加的。

    border-left: 1px solid #C4C4C4; 左灰色實心1px邊線。

    border-right: 1px solid #C4C4C4; 右灰色實心1px邊線。

    margin: 0px 1px; 左右1px邊界。

    簡單吧。

    建階用法

    會jquery的朋友,可以使用更簡單的方法完成。

    CSS相同,HTML只使用<div class="roundContent"></div>。

    用下列Javascript完成自動加<b>,加快HTML的撰寫。

    <script type="text/javascript">
        $(function() { addroundBorder(); })
     
        function addroundBorder() {
            var $content = $(".roundContent");
            $content.before('<b class="roundBorder"><b class="roundBorderLayer3"></b><b class="roundBorderLayer2"></b><b class="roundBorderLayer1"></b></b>');
            $content.after('<b class="roundBorder"><b class="roundBorderLayer1"></b><b class="roundBorderLayer2"></b><b class="roundBorderLayer3"></b></b>');
        }
    </script>
  • 相关阅读:
    minix中的文件锁
    minix代码中conv2()函数的作用
    ClassView中视图类框架类不见了的解决方法
    minix中的GDT,LDT,IDT和TSS
    MFC dlg窗口按回车(Enter)键和ESC键会退出解决方法
    MongoDB文档、集合、数据库简介
    Windows下MongoDB环境搭建
    【译】RabbitMQ:"Hello World"
    转载 jQuery技巧
    android call webservice by ksoap 实例代码
  • 原文地址:https://www.cnblogs.com/jcomet/p/1699290.html
Copyright © 2020-2023  润新知