• 技术文章 >web前端 >css教程

    css3怎么加内边框

    VV2020-11-30 17:21:48原创601

    css3加内边框的方法:可以通过使用border属性和box-sizing属性来加内边框,如【box-sizing:border-box;】。box-sizing属性允许以某种方式定义某些属性,以适应指定区域。

    本教程操作环境:windows7系统、css3版,该方法适用于所有品牌电脑。

    css3添加内边框

    相关属性:

    border属性允许你指定一个元素边框的样式和颜色。

    box-sizing 属性允许你以某种方式定义某些元素,以适应指定区域。

    (学习视频分享:css视频教程

    语法:

    box-sizing: content-box|border-box|inherit:

    属性值:

    代码实现:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <style> 
    div.container
    {
    	width:30em;
    	border:1em solid;
    }
    div.box
    {
    	box-sizing:border-box;
    	-moz-box-sizing:border-box; /* Firefox */
    	width:50%;
    	border:1em solid red;
    	float:left;
    }
    </style>
    </head>
    <body>
    
    <div class="container">
    <div class="box">这个 div 占据了左边的一半。</div>
    <div class="box">这个 div 占据了右边的一半。</div>
    </div>
    
    </body>
    </html>

    实现效果:

    f63f396c2684f818c15794e648c36b6.png

    相关推荐:CSS教程

    以上就是css3怎么加内边框的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css3 内边框
    上一篇:css如何设置图片轮廓 下一篇:css怎么使字体更加紧凑
    大前端线上培训班

    相关文章推荐

    • css如何设置相邻单元格边框之间的距离• css3是什么技术• bootstrap如何去掉边框• css怎么给图片加上下边框

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网