css3的背景和边框属性,css设置边框样式
一、css背景标签
1、设置背景色。
back-ground-color属性指定元素的背景色。
下图显示了一个小示例：
运行结果如下：
您可以通过选择器为不同的标签设置不同的颜色，其中h1、div和p标签将具有不同的背景颜色：
示例：
操作结果如下图所示：
2.设置背景图像
background-image属性指定用作元素背景的图像。默认情况下，图像会重复覆盖整个元素。使用url引入外部图片。
具体例子如下：
运行结果如下：
注意：使用背景图片时，注意背景图片的样式，不要有任何干扰文字的图像，以免影响效果。
css背景重复的问题
默认情况下，background-repeat属性垂直和水平重复图像。有些图像应该只适合水平或垂直重复。如果只想横向重复，需要使用(背景-重复：重复-x；)，背景更好看；如果只想垂直重复图像，需要设置背景-重复：重复-y；
属性还可以指定背景图像只显示一次：只需使用background-repeat:no-repeat:no-repeat标签。
4.指定背景图像的位置
需要background-position标签来指定背景图像的位置。
具体例子如下图所示：
将背景图像放在右上角的代码如下所示：
操作结果如下图所示：
5.将背景图像设置为固定。
Background-attachment属性用于将背景图像设置为固定，其属性值scroll image随页面元素滚动(默认值)，而fixed image固定在屏幕上，不随页面元素滚动。
6.设置背景图像大小。
属性可以设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果设置了一个值，第二个值将默认为auto。其格式如下：
背景-大小：属性1属性2；
例子如下：
运行结果如下：
7.设置图像透明效果。
使用opacity属性可以使任何元素看起来透明。透明度介于0和1之间，其格式如下：
不透明度：opacityValue
:
二、css边框标签
1.设置边框颜色
(1)设置边框样式(border-style)
边框样式用于定义边框的样式。常见的属性值如下：
无：如果没有边框，则忽略所有边框的宽度(默认值)。
实线：边框是单一的实线。
虚线：边框是虚线。
虚线：边框是虚线。
Double:边框是双实线。
你可以设置盒子的一边，也可以设置所有四边的样式。使用border-style属性综合设置四边样式时，必须按右上、左下的顺时针顺序；省略时采用值复制原则，即一个值有四条边；两个值是上下/左右；这三个值是上/左/右/下。
边框顶部样式：顶部边框样式
右边框样式：右边框样式。
底部样式：底部边框样式。
Border-left-style:底部边框样式。
边框样式：上边框样式右边框样式下边框样式左边框样式
边框样式：上边框样式、左右边框样式、下边框样式。
边框样式：上下边框样式和左右边框样式。
边框样式：顶部、底部、左侧和右侧边框样式。
(2)设置边框宽度。
border-width属性用于设置边框的宽度，其格式如下
border-width:top[右下左]；
在上面的语法格式中，border-with属性通常采用单位像素px的值。还有，遵循值复制的原则，它的属性值可以设置为1~4，即一个值为四边，两个值为上/下/左，三个值为上/左/右/下，四个值为上/左。如下所示：
Border-top-width:上边框的宽度
Border-right-width:右边框的宽度。
底部宽度：底部边框的宽度。
Border-left-width:下边框的宽度。
边框宽度：上边框宽度、右边框宽度、下边框宽度和左边框宽度
边框宽度：上边框宽度、左右边框宽度和下边框宽度。
边框宽度：上下边框宽度，左右边框宽度。
Border-width:上、下、左、右边框的宽度。
(3)设置边框颜色(border-color)
border-color属性用于设置边框颜色，其格式如下：
border-color:top[右下左]；
边框样式必须与边框样式同时设置。如果样式未设置或设置为无，其他边框属性将无效。边框颜色的单边和综合设置，按顺时针顺序，与上面宽度和样式属性的设置规则相同，这里不再赘述。
(4)全面设定边界
Border-top:顶部边框宽度样式颜色。
边框粗细：右边框宽度样式颜色
Border-bottom:底部边框宽度样式颜色
Border- left:左侧边框宽度样式颜色
边框：四边宽度样式颜色
(5)圆形边框
border-radius属性用于为元素添加圆形边框：
其语法格式如下图所示：
边界半径：参数1/参数2
其中“参数1”表示圆角的水平半径，“参数2”表示圆角的垂直半径，两个参数之间用“/”隔开。请注意，在使用border-raidius属性时，如果省略第二个参数，默认情况下它将等于第一个参数。通过边界半径设置边界圆角。
关于css背景和边框标签总结的这篇文章到此为止。更多相关css背景和边框内容，请搜索之前的文章或者继续浏览下面的相关文章。希望你以后能支持我！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。