html - CSS/HTML 流程图

Question

目前我正在尝试制作流程图，这是我目前得到的代码:

 #flowchart {
        width: 580px; 
        text-align: center;
        font-family: sans-serif;
        font-size: .8em;
        margin: auto;
    }  
    #flowchart a {
        display: block;
        color: white;
        text-decoration: none;
        background-color: #2F41B1;
        padding: 2em 1em;
    }
    #flowchart a:hover {
        color: #111;
        background-color: #EFA707;
    }
    .no1 {
        width: 390px;
        border: 1px solid #444;
        margin: 0 auto;
    }
    .line1 {
        width: 1px;
        height: 20px;
        background-color: #000;
        margin: 0 auto;
    } 
    .clear {
        clear:both;
    }         

    <div id="flowchart">
        <div class="no1"><a href="http://example.com/page1">Step 1:
    Blah blah blah, do this.</a></div>
        <div class="line1"></div>
        <div class="no1"><a href="http://example.com/page2">Step 2: 
    Then this and that.</a></div>
        <div class="line1"></div>
        <div class="no1"><a href="example.com/page3">Step 3: 
    Now finally go here and there.</a></div>
    
    </div>​

如何只将每个部分的标题(“步骤 x”)设为粗体和放大？ (而不是之后的内容，“blah blah then this etc”)

另外，我怎样才能制作圆 Angular 而不是尖锐的边缘？

Answer 1

我很快弄懂了你的魔杖老兄。 http://jsfiddle.net/jalbertbowdenii/NY973/1/