如何在css中设置内边框

这篇文章给大家介绍如何在css中设置内边框,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

创新互联建站从2013年创立,先为莲池等服务建站,莲池等地企业,进行企业商务咨询服务。为莲池企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

css设置内边框的示例。



  
    
    
  

  
    
      普通边框!!
      内边框!!
    
  

如何在css中设置内边框

box-sizing属性

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。

语法

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

属性值:

content-box:这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度(最小/最大属性)适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外

border-box:指定宽度和高度(最小/最大属性)确定元素边框。也就是说,对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit:指定 box-sizing 属性的值,应该从父元素继承。

示例:



  
    
    
  
  
    
      这个 div 占据了左边的一半。
      这个 div 占据了右边的一半。        

效果图:

如何在css中设置内边框

关于如何在css中设置内边框就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


标题名称:如何在css中设置内边框
网址分享:http://scyanting.com/article/pdiheh.html

其他资讯