轻松学：网页设计10-网页美化CSS 边框和背景

时间：2023-09-29 00:06:01 | 来源：网站运营

时间：2023-09-29 00:06:01 来源：网站运营

轻松学：网页设计10-网页美化CSS 边框和背景：边框与背景设置

1.边框设置

为了分割页面中不同的元素，常常需要给元素设置边框与背景效果。网页能通过边框与背景图像给读者留下更深刻的印象，所以在网页设计中，合理控制背景颜色和背景图像至关重要。

为了分割页面中不同的盒子，常常需要给元素设置边框效果。

border-width综合属性:常用取值单位为像素。在设置边框宽度时，必须同时设置边框样式，如果未设置样式或设置为none，则不论宽度设置为多少都无效。

在网页设计中，有时需要对区域整体添加一个图片边框，运用CSS3中的

border-image属性：可以轻松实现这个效果。

基本语法格式

border-image:border-image-source border-image-slice/ border-image-width/ border-image-outset border-image-repeat;

圆角边框（border-radius）是CSS3新增属性。

基本语法格式：border-radius:参数1/参数2

“参数1”表示圆角的水平半径，“参数2”表示圆角的垂直半径，两个参数之间用“/”隔开。

box-shadow属性：也可以改变阴影的投射方向以及添加多重阴影效果。

基本语法格式：box-shadow:像素值1像素值2像素值3像素值4 颜色值 阴影类型;

像素值1：表示元素水平阴影位置，可以为负值（必选属性）；像素值2表示元素垂直阴影位置，可以为负值（必选属性）；像素值3表示阴影模糊半径（可选属性）;像素值4表示阴影扩展半径，不能为负值（可选属性）；颜色值表示阴影颜色，为可选属性；阴影类型表示内阴影（inset）/外阴影（默认），为可选属性）。

2.背景的设置：

background-color属性：设置网页元素的背景颜色，其属性值与文本颜色的取值一样，background-color的默认值为transparent，即背景透明，此时子元素会显示其父元素的背景。

基本语法格式：background-color:背景颜色属性值

opacity属性：能够使任何元素呈现出透明效果，透明度值在0~1之间

opacity：opacityValue; 在CSS3中，使用opacity属性能够使任何元素呈现出透明效果

可以将图像作为网页元素的背景，通过background-image属性实现。

基本语法格式：background-image :url(图像文件路径);

body{background-color:#CCC; background-image:url(images/jianbian.jpg);} background-repeat属性控制背景图像水平和竖直两个方向平铺

background-position属性控制背景图像位置的值通常有两个，中间用空格隔开，水平和垂直方向的坐标。

background-attachment属性来设置背景图像固定。

background-size属性可以设置背景图像的高度和宽度。 background-size:属性值1 属性值2;

background-origin属性可以自行定义背景图像的相对位置。

在上面的语法格式中，background-origin属性有三种取值，分别表示不同的含义，具体解释如下。

padding-box：背景图像相对于内边距区域来定位。

border-box：背景图像相对于边框来定位。

content-box：背景图像相对于内容框来定位。

background-clip属性用于定义背景图像的裁剪区域

在语法格式上，background-clip属性和background-origin 属性的取值相似，但含义不同，具体解释如下。

border-box：默认值，从边框区域向外裁剪背景。

padding-box：从内边距区域向外裁剪背景。

content-box：从内容区域向外裁剪背景。

background-image、background-repeat、background-position和background-size等属性提供多个属性值可以实现多重背景图像效果，各属性值之间用逗号隔开。background-image:url(images/caodi.png),url(images/taiyang.png),url(images/tiankong.png);

背景属性也是一个复合属性，可以将背景相关的样式都综合定义在一个复合属性background中。

background:

[background-color]

[background-image]

[background-repeat]

[background-attachment]

[background-position]

[background-size]

[background-clip]

[background-origin];

通过引入RGBA模式和opacity属性，对背景与图片设置不透明度，opacity：opacityValue;

opacity属性用于定义标签的不透明度，参数opacityValue表示不透明度的值，它是一个介于0~1之间的浮点数值。其中，0表示完全透明，1表示完全不透明，而0.5则表示半透明。