第七十四节，css边框与背景

2022-03-12 10:56:26

css边框与背景

学习要点：
1.声明边框
2.边框样式
3.圆角边框

本章主要探讨HTML5中CSS边框和背景，通过边框和背景的样式设置，给元素增加更丰富的外观。

声明边框
边框的声明有三个属性设置，样式表如下

属性值说明 CSS版本

border-width 长度值设置边框的宽度，可选 1

border-style 样式名称设置边框的样式，必选 1

border-color 颜色值设置边框的颜色，可选 1

这三个属性值，只有border-style是必须声明，才可以出现边框。而其他两个属性会出现默认值。

div {

    border-style: solid;

}

<div>我是1</div>

<div>我是2</div>

<div>我是3</div>

border-width边框宽度取值

值　　说明

长度值　　CSS长度值：比如px、em等

百分数　　直接设置百分数：3%等

thin 　　预设宽度

medium 　　预设宽度

thick 　　预设宽度

div {

    border-style: solid;

    border-width: thick;

}

<div>我是1</div>

<div>我是2</div>

<div>我是3</div>

border-style边框线条的样式

值说明

none 　　　　　　没有边框

dashed 　　　　　　破折线边框

dotted 　　　　　　圆点线边框

double 　　　　　　双线边框

groove 　　　　　　槽线边框

inset 　　　　　　　使元素内容具有内嵌效果的边框

outset 　　　　　　使元素内容具有外凸效果的边框

ridge 　　　　　　　脊线边框

solid 　　　　　　实线边框

div {

    border-style: dotted;

    border-width: 3px;

}

<div>我是1</div>

border-color边框的颜色

值说明

　　　　 颜色代码　　　　　　　　给边框加颜色

div {

    border-style: dotted;

    border-width: 3px;

    border-color: #3aff1e;

}

<div>我是1</div>

边框四条边中某一条边单独进行设置

属性　　说明　　CSS版本

border-top-width 　　定义顶端宽度　　　1

border-top-style 　　　　　定义顶端样式　　　　　　 1

border-top-color 　　　　　　定义顶端颜色　　　　　　　 1

border-bottom-width 　　定义底部宽度 1

border-bottom-style 　　　　定义底部样式　　　　　　　 1

border-bottom-color　　　　定义底部颜色　　　　　　 1

border-left-width 　　定义左侧宽度 1

border-left-style 　　　　　定义左侧样式　　　　　　 1

border-left-color　　　　　　定义左侧颜色　　　　　　 1

border-right-width 　定义右边宽度 1

border-right-style 　　　　定义右边样式　　　　　　1

border-right-color　　　　　　定义右边颜色　　　　　　 1

div {

    border-top-width: 5px;

    border-top-style: solid;

    border-top-color: #ff2e2a;

}

<div>我是1</div>

边框简写格式

有很多时候没必要分写成三句样式，直接通过简写即可：

属性　　值　　　　　　　　说明　　　　　　CSS版本

border <宽度> <样式> <颜色> 设置四条边的边框　　　　1

border-top 　　　 <宽度> <样式> <颜色> 只设置上边框　　　　　 1

border-bottom 　　 <宽度> <样式> <颜色> 　　　　只设置下边框 1

border-left 　　　 <宽度> <样式> <颜色> 只设置左边框　　 1

border-right 　　 <宽度> <样式> <颜色> 只设置右边框　　 1

如果四条边框一样简写格式

div {

    border: 6px solid crimson;

}

<div>我是1</div>

如果单独设置其中一条简写

div {

    border: 6px solid crimson;

    border-left: 2px solid springgreen;

}

<div>我是1</div>

其他同理

圆角边框
CSS3提供了一个非常实用的圆角边框的设置。使用border-radius属性，就可以达到这种效果，样式表如下：

属性　　　　值　　　　　　说明　　　　　　CSS版本

border-radius 长度值或百分数四条边角圆 3

border-top-left-radius 长度值或百分数左上边角圆 3

border-top-right-radius 　长度值或百分数　　　　右上边角圆 3

border-bottom-left-radius 　　　　长度值或百分数　　　　左下边角圆 3

border-bottom-right-radius 　　　长度值或百分数　　　　右下边角圆 3

注意：设置圆边角首先要先设置好边框的，宽度样式颜色，在设置圆边角

四条边角圆简写方式

div {

    border: 6px solid crimson;

    border-radius: 6px;

}

<div>我是1</div>

设置指定的边角圆，可以按照上右下左的规律，简写

div {

    border: 6px solid crimson;

    border-radius: 6px 0px 6px 0px;

}

<div>我是1</div>

附加：

如果：一个元素点击后有意外的边框，可以用outline：none；

将边框的尺寸计算在元素内，也就是边框不会占元素的尺寸box-sizing: border-box;，一般写在通用css里，

如在头部css写上:

div{

box-sizing: border-box;

}

设置背景

本章主要探讨HTML5中CSS边框和背景，通过边框和背景的样式设置，给元素增加更丰富的外观。

设置背景

属性　　　　　　值　　说明　　　　　　　　　CSS版本

background-color 　　　　颜色　　　背景的颜色　　 1

background-image 　　　　 none或url 　　背景的图片　　 1/3

background-repeat 　　样式名称　　背景图片的样式　　 1/3

background-size 　　　　长度值或其他　　背景图像的尺寸 3

background-position 　　位置坐标　　背景图像的位置　　1

background-attachment 　　滚动方式　　背景图片的滚动 1/3

background-clip 　　裁剪方式　　背景图片的裁剪　　3

background-origin 　　位置坐标　　背景图片起始点　 3

background 　　　　复合值　　　　背景图片简写方式 1

background-color设置背景颜色

值说明　　　　　　　　CSS版本

颜色代码　设置背景颜色为指定色 1

transparent 　　设置背景颜色为透明色 1

div {

    width: 100px;

    height: 50px;

    background-color: #ff2e2a;

}

<div>我是1</div>

background-image设置背景图片

值说明　　　　　　CSS版本

none 　　　取消背景图片的设置 1

url 　　通过URL设置背景图片 1

div {

    width: 318px;

    height: 213px;

    background-image: url("401.png");

}

<div>我是1</div>

background-repeat设置背景图片展现方式

值说明　　　　　　　　　　CSS版本

repeat-x 　　水平方向平铺图像　1

repeat-y 　　垂直方向平铺图像 1

repeat 　　水平和垂直方向同时平铺图像 1

no-repeat 　　禁止平铺图像　　1

body{

    background-image: url("401.png");

    background-repeat:no-repeat;

}

div {

    width: 318px;

    height: 213px;

}

<body>

<div>我是1</div>

</body>

</html>

background-position背景图片定位

值说明　　　　　　　　　　CSS版本

top 　　　　　将背景图片定位到元素顶部 1

left 　　　　将背景图片定位到元素左部 1

right 　　　　将背景图片定位到元素右部 1

bottom 　　将背景图片定位到元素底部 1

center 　　　　将背景图片定位到元素中部 1

长度值　　　使用长度值偏移图片的位置 1

百分数　　使用百分数偏移图片的位置 1

html{

    height: 100%;

}

body{

    background-image: url("401.png");

    background-repeat:no-repeat;

    background-position: center;

}

div {

    width: 318px;

    height: 213px;

}

<div>我是1</div>

注意：背景图片定位，如果使用背景的元素没有指定宽度或者高度，有可能无法定位

background-size背景图片缩放

值　　说明　　　　　　CSS版本

auto 　　默认值，图像以本尺寸显示　　　　 3

cover 　　等比例缩放图像，使图像至少覆盖容器，但有可能超出容器 3

contain 　　等比例缩放图像，使其宽度、高度中较大者与容器横向或纵向重合 3

长度和高度值　　CSS长度值，比如px、em 3

百分数　　比如：100% 3

div {

    background-image: url("401.png");

    background-size: contain;

    background-repeat: no-repeat;

    width: 418px;

    height: 313px;

}

<div>我是1</div>

background-attachment设置背景图片是否更随滚动条拖动

值说明　　　　　　　　　　　　　　　　　　CSS版本

scroll 　　　　默认值，背景固定在元素上，不会随着内容一起滚动　　 1

fixed 　　　　背景固定在视窗上，内容滚动时背景不动 1

body{

    background-image: url("845.jpg");

    background-attachment: fixed;

}

background-origin绘制背景图片，设置背景图片起始位置

值说明　　　　　　　　 CSS版本

border-box 　　在元素盒子内部绘制背景 3

padding-box 　　　在内边距盒子内部绘制背景 3

content-box 　　在内容盒子内部绘制背景 3

div {

    background-image: url("401.png");

    background-repeat: no-repeat;

    border: 10px dashed red;

    background-origin: padding-box;

    padding: 50px;

    width: 218px;

    height: 113px;

}

<div>我是1</div>

background-clip裁剪背景图片

值说明　　　　　　CSS版本

border-box 　　　在元素盒子内部裁剪背景 3

padding-box 　　在内边距盒子内部裁剪背景 3

content-box 　　　在内容黑子内部裁剪背景 3

div {

    background-image: url("401.png");

    background-repeat: no-repeat;

    border: 10px dashed red;

    background-clip: content-box;

    padding: 50px;

    width: 218px;

    height: 113px;

}

<div>我是1</div>

如果多个背景图标在一张图片上，用坐标方式定位背景图标

说明：background: url("2015.png")(图片路径) 10px(横向坐标) -45px(竖向坐标) no-repeat(背景图片显示一次);

div{

    width: 132px;

    height: 42px;

    background-color: #4af5ff;

    background: url("2015.png") 10px -45px no-repeat;

    line-height: 42px;

}

samp{

    margin-left: 40px;

}

<div>

    <samp>加入购物车</samp>

</div>

效果：

注意：背景完整的简写顺序如下：

[background-color]
[background-image]
[background-repeat]
[background-attachment]
[background-position]/ [background-size]
[background-origin]
[background-clip];

如：background: silver url(img.png) no-repeat scroll left top/100% border-box content-box;

码农公寓

相关文章