css 邊框上如何寫入文字？

時間 2019-11-08

標籤 css 邊框如何寫入文字欄目 CSS 简体版

原文原文鏈接

方法一：css

一、首先，打開html編輯器，新建html文件，例如：index.html。html

二、在index.html中的<body>標籤中，輸入html代碼：。瀏覽器

<div style="margin-top: 30px;width: 200px;height:80px;border: 1px solid blue;">編輯器

<div style="position: absolute;left: 30px;top: 15px;">文字</div>spa

</div>3d

三、瀏覽器運行index.html頁面，此時實現了邊框角落開口顯示文字。code

方法二：htm

這個能夠經過相對定位使某元素剛好處在div的邊框上的方式來實現blog

1	`position` `:` `relative` `;`

下面舉例說明ci

建立Html元素

 
        < 
        div 
        > 
       
 
             
        < 
        span  
        class 
        = 
        "title" 
        >我是邊框上的文字</ 
        span 
        > 
       
 
             
        < 
        span 
        >我是邊框內的文字</ 
        span 
        > 
       
 
        </ 
        div 
        > 
       

設置css樣式

 
        div{ 
       
        width 
        : 
        200px 
        ; 
       
        height 
        : 
        100px 
        ; 
       
        padding 
        : 
        5px  
        30px 
        ; 
       
        margin 
        : 
        50px 
        ; 
       
        border 
        : 
        4px  
        solid  
        #ebcbbe 
        ; 
       
        } 
       
        span.title{ 
       
        display 
        : 
        block 
        ; 
       
        width 
        : 
        150px 
        ; 
       
        height 
        : 
        30px 
        ; 
       
        position 
        : 
        relative 
        ; 
       
        top 
        : 
        -15px 
        ; 
       
        text-align 
        :  
        center 
        ; 
       
        background 
        :  
        white 
        ; 
       
        }