CSS的列表、边框、背景图属性

CSS的列表

列表样式类型 list-style-type:圆形circle/方形squre

以图片代替标签 list-style-images:

重点:list-style:none;

我们一般都要清除默认属性;

CSS的边框 border

border-width:边框宽度

boder-style:none/实线solid/虚线dashed/点状线dotted

border-color:边框颜色 注:transparent 透明色;

指定边框添加的方位:border-top/right/bottom/left: 上述属性可以缩写,没有顺序要求

而且这三个属性,每一个后面最多可以跟

​ 1个属性值时,默认四个方向都是这个属性值;

​ 2个属性值时,分别是上下、左右的属性值;

​ 3个属性值时,分别是上、左右、下的属性值;

​ 4个属性值时,分别代表上右下左方向的属性值;

例如 border-color:red green yellow blue; 四边的切面是斜的

如果元素的宽高都为0,仍然可以有border,这样可以用CSS做成个三角形(左右透明,只留下侧)

背景图

背景图颜色

background-color;

背景图的显示: background-image:url();

1、背景图是不占据空间的;且只会显示在容器内。

2、图片大小小于容器大小时,知道铺满为止;

3、图片打下等于容器大小时,全部显示;

4、图片大小大于容器大小时,部分显示;

背景图的平铺:

background-repeat:repeat/no-repeat/repeat-x/repeat-y;

背景图的位置关系:

background-position:水平位置 垂直位置 , 可以为负值,,,

正值分别向右向下,负值分别为向左向上;

同时支持百分比;(父元素的百分比) 10% 20%;

left bottom 背景图左侧下侧都到达容器的边缘

right center 背景图会贴到右侧边缘且居中;

结合起来也是可以的,例如 background-position: 100px top; 距离左侧100px顶部0px

不可以直接写一个值,例:backgrund-position:100px 会默认左侧100px,上下居中。

拓展:背景图的固定。

background-attchment:fixed;

背景图的简写:

background:red url() no-repeat 100px center fixed;

背景图和图片的区别:

a、背景图不占据空间,仅渲染,图片是htm的结构,占据空间。

发布了19 篇原创文章 · 获赞 0 · 访问量 221

猜你喜欢

转载自blog.csdn.net/weixin_44222157/article/details/105060496
今日推荐