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 
        ; 
       
        }

观察显示效果

方法三：

<fieldset><legend>文字内容</legend><p>kkkk</p></fieldset>这样就行