2023年6月20日发(作者：)

html背景框⼤⼩代码,CSS3：元素的边框、背景和⼤⼩_htmlcss_WEB-ITnose边框和边框相关的属性如下。border-width⽤于设置边框的宽度，可选择包括：1)：将边框宽度设为以CSS度量单位(如em、px、cm)表达的长度值；2)：将边框宽度值设为边框绘制区域的宽度的百分数；3)thin、medium和thick：将边框宽度设为预设宽度，这三个值的具体意义是由浏览器定义，三个值代表的宽度⼀次增⼤，边框宽度的默认值是medium。border-style⽤于设置绘制边框使⽤的样式，可以是下列值的任意⼀个。1)none：没有边框，默认值；2)dashed：破折线式边框；3)dotted：圆点线式边框；4)groove：槽线式边框；5)inset：使元素内容具有内嵌效果的边框；6)outset：使元素内容具有外凸效果的边框；7)ridge：脊线边框；8)solid：实线边框。 border-color设置边框的颜⾊。为特定边设置边框样式顶边border-top-widthborder-top-styleborder-top-color底边border-bottom-widthborder-bottom-styleborder-bottom-color左边border-left-widthborder-left-styleborder-left-color右边border-right-widthborder-right-styleborder-right-color简写⽅式border:border-top:border-bottom:border-left:border-right:圆⾓边框border-top-left-radiusborder-top-right-radiusborder-bottom-left-radiusborder-bottom-right-radius设置⼀个圆⾓。⼀对长度值或百分数值，百分数跟边框盒⼦的宽度和⾼度相关。border-radius⼀次设置四个⾓。⼀对或四队长度值或百分数值，由/字符分割。p {border: medium solid black;}#first {border-radius: 20px / 15px;}#second {border-radius: 50% 20px 25% 5em / 25%15px 40px 55%} 背景背景颜⾊和图像可以为元素的背景设置颜⾊、图像、⼤⼩和平铺⽅式，如下：p {border: medium solid black;background-color: lightgray;background-image: url();background-size: 40px40px;background-repeat: repeat-x;}background-repeat⽀持如下属性值：1)repeat-x：⽔平⽅向平铺图像，图像可能被截断；2)repeat-y：垂直⽅向平铺图像，图像可能被截断；3)repeat：⽔平和垂直⽅向同时平铺图像，图像可能被截断；4)space：⽔平或者垂直⽅向平铺图像，但在图像与图像之间设置统⼀间距，确保图像不被截断；5)round：⽔平或者垂直⽅向平铺图像，但调整图像⼤⼩，确保图像不被截断；6)no-repeat：禁⽌平铺图像。background-size⽀持如下属性值：1)contain：等⽐例缩放图像，使其宽度、⾼度中较⼤者与容器横向或纵向重合，背景图像始终包含在容器内；2)cover：等⽐例缩放图像，使图像⾄少覆盖容器，有可能超出容器；3)auto：默认值，图像以本⾝尺⼨完全显⽰。设置背景图像位置background-position属性设置背景图像的位置。p {border: 10px double black;background-color: lightgray;background-image: url();background-size: 40px40px;background-repeat: no-repeat;background-position: 30px 10px;}background-position属性的值包括：1)top：将背景图像定位到盒⼦顶部边界；2)left：将背景图像定位到盒⼦左边界；3)right：将背景图像定位到盒⼦右边界；4)bottom：将背景图像定位到盒⼦底部边界；5)center：将背景图像定位到中间位置。元素背景的附着⽅式当元素具有滚动条时，使⽤background-attachment属性可以控制背景的附着⽅式。⽀持的属性值包括：1)fixed：背景固定到视窗上，即内容滚动时背景不动；2)local：背景附着到内容上，即背景随内容⼀起滚动；3)scroll：背景固定到元素上，不会随内容⼀起滚动。背景图像的开始位置和裁剪样式background-origin属性指定背景颜⾊和背景图像应⽤的位置。⽀持的属性值包括：1)border-box：在边框盒⼦内部绘制背景颜⾊和背景图像；2)padding-box：在内边距盒⼦内部绘制背景颜⾊和背景图像；3)content-box：在内容盒⼦内部绘制背景颜⾊和背景图像。background-clip属性决定了背景的哪⼀部分是可见的，裁剪盒⼦之外的部分⼀律被丢弃，不会显⽰。⽀持的属性值同上。简写⽅式可以使⽤background简写属性在⼀条声明中设置所有的背景值：background: 阴影使⽤box-shadow属性可以为元素的盒⼦添加阴影效果。⽀持的属性值如下：1)hoffset：阴影的⽔平偏移量，是⼀个长度值，正值代表阴影向右偏移，负值代表阴影向左偏移；2)voffset：阴影的垂直偏移量，是⼀个长度值，正值代表阴影位于元素盒⼦下⽅，负值代表阴影位于元素盒⼦上⽅；3)blur：(可选)模糊值，是⼀个长度值，值越⼤盒⼦的边界越模糊。默认值0，边界清晰；4)spread：(可选)阴影的延伸半径，是⼀个长度值，正值代表阴影向盒⼦各个⽅向延伸扩⼤，负值代表阴影沿相反⽅向缩⼩；5)color：(可选)设置阴影的颜⾊，如果省略，浏览器会⾃⾏选择⼀个颜⾊；6)inset：(可选)将外部阴影设置为内部阴影(内嵌到盒⼦中)。可以⼀次设置多个阴影，使⽤逗号分隔：p {border: 10px double black;box-shadow: 5px 4px 10px 2px gray, 4px 4px 6px gray inset;} 轮廓轮廓是可选的，轮廓的⽤处是在短时间内抓住⽤户对某个元素的注意⼒，轮廓绘制在盒⼦边框的外⾯，边框和轮廓的最⼤的区别是：轮廓不属于页⾯，因此应⽤轮廓不需要调整页⾯布局。轮廓的属性包括：1)outline-color：设置外围轮廓的颜⾊；2)outline-offset：长度值，设置轮廓距离元素边框边缘的偏移量；3)outline-style：设置轮廓样式，同border-style的值；4)outline-width：设置轮廓的宽度，包括：thin、medium、thick和长度值；5)ouline：在⼀条⽣命中设置轮廓的所有属性( )。 元素的边距元素的内边距元素的内边距是元素内容和边框之间的空⽩，内边距有如下属性，值都为长度值或者百分数：1)padding-top：为顶边设置内边距；2)padding-right：为右边设置内边距；3)padding-bottom：为底边设置内边距；4)padding-left：为左边设置内边距；5)padding：简写属性，同时设置所有边的内边距。p {border: 10px solid black;background: lightgray;border-radius: 1em 4em 1em 4em;padding: 5px 25px 5px 40px;}元素的外边距元素的外边距是元素边框和页⾯上围绕在它周围的所有东西之间的空⽩区域，外边距有如下属性，值都为长度值或者百分数：1)margin-top：为顶边设置外边距；2)margin-right：为右边设置外边距；3)margin-bottom：为底边设置外边距；4)margin-left：为左边设置外边距；5)margin：简写属性，在⼀条声明中设置所有边的外边距。img {border: 4px solid black;background: lightgray;padding: 4px;margin: 4px 20px;}元素的⼤⼩CSS提供了控制元素尺⼨的属性，这些属性可以使⽤的值为auto、长度值或者百分数。auto表⽰让浏览器设置元素的宽度和⾼度。设定区域box-sizing属性指定尺⼨样式应⽤到元素盒⼦的具体区域，取值包括：1)content-box：尺⼨设置仅应⽤到内容区域；2)pading-box：尺⼨设置应⽤到pading区域；3)border-box：尺⼨设置应⽤到border区域；4)margin-box：尺⼨设置应⽤到margin区域。最⼩和最⼤尺⼨min-width和max_width属性为浏览器调整尺⼨设置⼀定的限制。img {background: lightgray;border: 4px solid black;margin: 2px;box-sizing: border-box;min-width: 100px;width:50%;max_width: 200px;}内容溢出如果元素的尺⼨过⼤，⽆法完全显⽰在元素的内容盒中，⽬前有3个属性⽤于控制内部溢出部分的处理⽅式：1)overflow-x：设置⽔平⽅向的溢出⽅式；2)overflow-y：设置垂直⽅向的溢出⽅式；3)overflow：同时设置⽔平⽅向和垂直⽅向的溢出⽅式。3个属性⽀持的属性值如下：1)auto：浏览器⾃⾏处理溢出内容；2)hidden：多余的部分直接剪掉，只显⽰内容盒⾥⾯的内容；3)no-content：如果内容⽆法全部显⽰，就直接移除，⼤部分浏览器都不⽀持；4)no-display：如果内容⽆法全部显⽰，就隐藏所有内容，⼤部分浏览器都不⽀持；5)scroll：为内容添加滚动条，即使内容没有溢出也能看到滚动条；6)visible：默认值，不管是否溢出内容盒，都显⽰元素效果。p {width: 200px;height: 100px;border: medium double black;}#first {overflow: hidden;}#second {overflow: scroll;}元素的可见性使⽤visibility属性可以控制元素的可见性，⽀持的属性值如下：1)collapse：元素不可见，且在页⾯布局中不占据空间；2)hidden：元素不可见，但在页⾯布局中占据空间；3)visible：默认值，可见。 元素的盒类型display属性提供了⼀种改变元素盒类型的⽅式，这会改变元素在页⾯上的布局⽅式。该属性的常⽤值如下，不包括弹性盒⼦、表格和ruby注释相关的属性：1)inline：盒⼦显⽰为⽂本⾏中的字；2)block：盒⼦显⽰为段落；3)inline-block：盒⼦显⽰为⽂本⾏；4)list-item：盒⼦显⽰为列表项；5)run-in：盒⼦类型取决于周围的元素；6)none：元素不可见，且在页⾯布局中不占空间。 浮动float属性设置元素的浮动样式，可选择包括：1)left：移动元素，使其左边界挨着包含块的左边界，或者另⼀个浮动元素的右边界；2)right：移动元素，使其右边界挨着包含块的右边界，或者另⼀个浮动元素的左边界；3)none：元素位置固定。{float: left;border: medium double black;width: 40%;margin: 2px;padding: 2px;}声明：本⽂原创发布php中⽂⽹，转载请注明出处，感谢您的尊重！如有疑问，请联系admin@处理

2023年6月20日发(作者：)

html背景框⼤⼩代码,CSS3：元素的边框、背景和⼤⼩_htmlcss_WEB-ITnose边框和边框相关的属性如下。border-width⽤于设置边框的宽度，可选择包括：1)：将边框宽度设为以CSS度量单位(如em、px、cm)表达的长度值；2)：将边框宽度值设为边框绘制区域的宽度的百分数；3)thin、medium和thick：将边框宽度设为预设宽度，这三个值的具体意义是由浏览器定义，三个值代表的宽度⼀次增⼤，边框宽度的默认值是medium。border-style⽤于设置绘制边框使⽤的样式，可以是下列值的任意⼀个。1)none：没有边框，默认值；2)dashed：破折线式边框；3)dotted：圆点线式边框；4)groove：槽线式边框；5)inset：使元素内容具有内嵌效果的边框；6)outset：使元素内容具有外凸效果的边框；7)ridge：脊线边框；8)solid：实线边框。 border-color设置边框的颜⾊。为特定边设置边框样式顶边border-top-widthborder-top-styleborder-top-color底边border-bottom-widthborder-bottom-styleborder-bottom-color左边border-left-widthborder-left-styleborder-left-color右边border-right-widthborder-right-styleborder-right-color简写⽅式border:border-top:border-bottom:border-left:border-right:圆⾓边框border-top-left-radiusborder-top-right-radiusborder-bottom-left-radiusborder-bottom-right-radius设置⼀个圆⾓。⼀对长度值或百分数值，百分数跟边框盒⼦的宽度和⾼度相关。border-radius⼀次设置四个⾓。⼀对或四队长度值或百分数值，由/字符分割。p {border: medium solid black;}#first {border-radius: 20px / 15px;}#second {border-radius: 50% 20px 25% 5em / 25%15px 40px 55%} 背景背景颜⾊和图像可以为元素的背景设置颜⾊、图像、⼤⼩和平铺⽅式，如下：p {border: medium solid black;background-color: lightgray;background-image: url();background-size: 40px40px;background-repeat: repeat-x;}background-repeat⽀持如下属性值：1)repeat-x：⽔平⽅向平铺图像，图像可能被截断；2)repeat-y：垂直⽅向平铺图像，图像可能被截断；3)repeat：⽔平和垂直⽅向同时平铺图像，图像可能被截断；4)space：⽔平或者垂直⽅向平铺图像，但在图像与图像之间设置统⼀间距，确保图像不被截断；5)round：⽔平或者垂直⽅向平铺图像，但调整图像⼤⼩，确保图像不被截断；6)no-repeat：禁⽌平铺图像。background-size⽀持如下属性值：1)contain：等⽐例缩放图像，使其宽度、⾼度中较⼤者与容器横向或纵向重合，背景图像始终包含在容器内；2)cover：等⽐例缩放图像，使图像⾄少覆盖容器，有可能超出容器；3)auto：默认值，图像以本⾝尺⼨完全显⽰。设置背景图像位置background-position属性设置背景图像的位置。p {border: 10px double black;background-color: lightgray;background-image: url();background-size: 40px40px;background-repeat: no-repeat;background-position: 30px 10px;}background-position属性的值包括：1)top：将背景图像定位到盒⼦顶部边界；2)left：将背景图像定位到盒⼦左边界；3)right：将背景图像定位到盒⼦右边界；4)bottom：将背景图像定位到盒⼦底部边界；5)center：将背景图像定位到中间位置。元素背景的附着⽅式当元素具有滚动条时，使⽤background-attachment属性可以控制背景的附着⽅式。⽀持的属性值包括：1)fixed：背景固定到视窗上，即内容滚动时背景不动；2)local：背景附着到内容上，即背景随内容⼀起滚动；3)scroll：背景固定到元素上，不会随内容⼀起滚动。背景图像的开始位置和裁剪样式background-origin属性指定背景颜⾊和背景图像应⽤的位置。⽀持的属性值包括：1)border-box：在边框盒⼦内部绘制背景颜⾊和背景图像；2)padding-box：在内边距盒⼦内部绘制背景颜⾊和背景图像；3)content-box：在内容盒⼦内部绘制背景颜⾊和背景图像。background-clip属性决定了背景的哪⼀部分是可见的，裁剪盒⼦之外的部分⼀律被丢弃，不会显⽰。⽀持的属性值同上。简写⽅式可以使⽤background简写属性在⼀条声明中设置所有的背景值：background: 阴影使⽤box-shadow属性可以为元素的盒⼦添加阴影效果。⽀持的属性值如下：1)hoffset：阴影的⽔平偏移量，是⼀个长度值，正值代表阴影向右偏移，负值代表阴影向左偏移；2)voffset：阴影的垂直偏移量，是⼀个长度值，正值代表阴影位于元素盒⼦下⽅，负值代表阴影位于元素盒⼦上⽅；3)blur：(可选)模糊值，是⼀个长度值，值越⼤盒⼦的边界越模糊。默认值0，边界清晰；4)spread：(可选)阴影的延伸半径，是⼀个长度值，正值代表阴影向盒⼦各个⽅向延伸扩⼤，负值代表阴影沿相反⽅向缩⼩；5)color：(可选)设置阴影的颜⾊，如果省略，浏览器会⾃⾏选择⼀个颜⾊；6)inset：(可选)将外部阴影设置为内部阴影(内嵌到盒⼦中)。可以⼀次设置多个阴影，使⽤逗号分隔：p {border: 10px double black;box-shadow: 5px 4px 10px 2px gray, 4px 4px 6px gray inset;} 轮廓轮廓是可选的，轮廓的⽤处是在短时间内抓住⽤户对某个元素的注意⼒，轮廓绘制在盒⼦边框的外⾯，边框和轮廓的最⼤的区别是：轮廓不属于页⾯，因此应⽤轮廓不需要调整页⾯布局。轮廓的属性包括：1)outline-color：设置外围轮廓的颜⾊；2)outline-offset：长度值，设置轮廓距离元素边框边缘的偏移量；3)outline-style：设置轮廓样式，同border-style的值；4)outline-width：设置轮廓的宽度，包括：thin、medium、thick和长度值；5)ouline：在⼀条⽣命中设置轮廓的所有属性( )。 元素的边距元素的内边距元素的内边距是元素内容和边框之间的空⽩，内边距有如下属性，值都为长度值或者百分数：1)padding-top：为顶边设置内边距；2)padding-right：为右边设置内边距；3)padding-bottom：为底边设置内边距；4)padding-left：为左边设置内边距；5)padding：简写属性，同时设置所有边的内边距。p {border: 10px solid black;background: lightgray;border-radius: 1em 4em 1em 4em;padding: 5px 25px 5px 40px;}元素的外边距元素的外边距是元素边框和页⾯上围绕在它周围的所有东西之间的空⽩区域，外边距有如下属性，值都为长度值或者百分数：1)margin-top：为顶边设置外边距；2)margin-right：为右边设置外边距；3)margin-bottom：为底边设置外边距；4)margin-left：为左边设置外边距；5)margin：简写属性，在⼀条声明中设置所有边的外边距。img {border: 4px solid black;background: lightgray;padding: 4px;margin: 4px 20px;}元素的⼤⼩CSS提供了控制元素尺⼨的属性，这些属性可以使⽤的值为auto、长度值或者百分数。auto表⽰让浏览器设置元素的宽度和⾼度。设定区域box-sizing属性指定尺⼨样式应⽤到元素盒⼦的具体区域，取值包括：1)content-box：尺⼨设置仅应⽤到内容区域；2)pading-box：尺⼨设置应⽤到pading区域；3)border-box：尺⼨设置应⽤到border区域；4)margin-box：尺⼨设置应⽤到margin区域。最⼩和最⼤尺⼨min-width和max_width属性为浏览器调整尺⼨设置⼀定的限制。img {background: lightgray;border: 4px solid black;margin: 2px;box-sizing: border-box;min-width: 100px;width:50%;max_width: 200px;}内容溢出如果元素的尺⼨过⼤，⽆法完全显⽰在元素的内容盒中，⽬前有3个属性⽤于控制内部溢出部分的处理⽅式：1)overflow-x：设置⽔平⽅向的溢出⽅式；2)overflow-y：设置垂直⽅向的溢出⽅式；3)overflow：同时设置⽔平⽅向和垂直⽅向的溢出⽅式。3个属性⽀持的属性值如下：1)auto：浏览器⾃⾏处理溢出内容；2)hidden：多余的部分直接剪掉，只显⽰内容盒⾥⾯的内容；3)no-content：如果内容⽆法全部显⽰，就直接移除，⼤部分浏览器都不⽀持；4)no-display：如果内容⽆法全部显⽰，就隐藏所有内容，⼤部分浏览器都不⽀持；5)scroll：为内容添加滚动条，即使内容没有溢出也能看到滚动条；6)visible：默认值，不管是否溢出内容盒，都显⽰元素效果。p {width: 200px;height: 100px;border: medium double black;}#first {overflow: hidden;}#second {overflow: scroll;}元素的可见性使⽤visibility属性可以控制元素的可见性，⽀持的属性值如下：1)collapse：元素不可见，且在页⾯布局中不占据空间；2)hidden：元素不可见，但在页⾯布局中占据空间；3)visible：默认值，可见。 元素的盒类型display属性提供了⼀种改变元素盒类型的⽅式，这会改变元素在页⾯上的布局⽅式。该属性的常⽤值如下，不包括弹性盒⼦、表格和ruby注释相关的属性：1)inline：盒⼦显⽰为⽂本⾏中的字；2)block：盒⼦显⽰为段落；3)inline-block：盒⼦显⽰为⽂本⾏；4)list-item：盒⼦显⽰为列表项；5)run-in：盒⼦类型取决于周围的元素；6)none：元素不可见，且在页⾯布局中不占空间。 浮动float属性设置元素的浮动样式，可选择包括：1)left：移动元素，使其左边界挨着包含块的左边界，或者另⼀个浮动元素的右边界；2)right：移动元素，使其右边界挨着包含块的右边界，或者另⼀个浮动元素的左边界；3)none：元素位置固定。{float: left;border: medium double black;width: 40%;margin: 2px;padding: 2px;}声明：本⽂原创发布php中⽂⽹，转载请注明出处，感谢您的尊重！如有疑问，请联系admin@处理