css内边框怎么设置

css是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种定义样式结构如字体,颜色,位置等的语言,并且css样式可以直接存储于HTML网页或者单独的样式单文件中,而样式规则的优先级由css根据这个层次结构决定,从而实现级联效果,发展至今,css不仅能装饰网页,也可以配合各种脚本对于网页进行格式化。

方法:首先在元素中使用边界属性定义边框,然后使用“box-sizing: border-box”语句设置内边框.box-sizing属性用于以某种方式定义某些元素,以适应指定区域;当值设置为“border-box”时可定义内边框。

本教程操作环境:windows7多系统,CSS3&, HTML5版,戴尔G3电脑。

<强> css设置内边框

在css中,可以使用边界属性配合box-sizing属性来加内边框。

<李>

边境属性用于添加边框

<李>

box-sizing属性用于以某种方式定义某些元素,以适应指定区域,将属性值设置border-box值来加内边框。

示例:

& lt; ! DOCTYPE  html> 　　& lt; html> 　　& lt; head> 　　& lt; meta  charset=皍tf-8"祝辞 　　& lt; style> 　　div.container  { 　　宽度:30 em; 　　边界:1 em 固体; 　　} 　　 　　div.box1  { 　　宽度:50%; 　　边界:1 em  solid 红色; 　　浮:左; 　　} 　　 　　div.box2  { 　　box-sizing: border-box; 　　-moz-box-sizing: border-box;/*,Firefox  */宽度:50%; 　　边界:1 em  solid 红色; 　　浮:左; 　　} 　　& lt;/style> 　　& lt;/head> 　　 　　& lt; body> 　　 　　& lt; div 类=癱ontainer"祝辞 　　& lt; div 类=癰ox1"祝辞普通边框! ! & lt;/div> 　　& lt; div 类=癰ox2"祝辞内边框! ! & lt;/div> 　　& lt;/div> 　　 　　& lt;/body> 　　 　　& lt;/html>

效果图:

<强>说明:box-sizing属性

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

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

属性值:

<李>

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

<李>

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

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

css内边框怎么设置