文章目录
- border
- 背景色
- 总结
- 往期回顾
border
CSS border 是前端开发中用于控制元素边框外观的重要属性。边框不仅能够增强网页的视觉层次感,还能提供清晰的界面分区,对于提升用户体验和网页设计美学至关重要。
border
: 边框粗细 + 边框的样式 + 颜色
- 虚线边框
border: 3px dotted red;
- 实线边框
border: 3px soild red;
- 单独有一遍有边框
border-left: 3px solid red;
- 单独改变一边的颜色
border: 3px solid green ;
border-left: 3px solid red ;
背景色
background属性是所有背景属性的缩写,通常建议在代码中使用该缩写属性,而不是使用多条单独的背景属性,因为该缩写属性在老版本浏览器中支持性更好,而且书写简便。未写在缩写属性中的其他背景属性,则会采用默认值。
我们初学常用的就是设置元素的背景颜色:
background-color:设置元素的背景颜色,默认值:transparent。
background-image:设置元素的背景图像,默认值:none。
background-size:设置元素背景图像的大小,默认值:auto。
background-position:设置元素背景图像的位置,默认值:0% 0%。
background-repeat:设置背景图像是否重复,以及如何重复,默认值:repeat。
background-clip:设置元素背景的渲染区域,默认值:border-box。
background-origin:设置元素背景的定位区域(背景区),默认值:border-box。
background-attachment:设置元素的背景图像是否随页面滚动或固定,默认值:scroll。
background-blend-mode(不支持简写):设置元素背景层的混合模式,默认值:normal。
background: 自己选择颜色;
总结
以上,部分网页常用的css已经全部讲完
- 大致了解css的网页标签
- 模板:
- 模板基本使用逻辑
- 模板 + css知识点
往期回顾
1.【快速开发网站】
2.【浏览器能识别的标签1】
3.【浏览器能识别的标签2】
4.【浏览器能识别的标签3】
5.【浏览器能识别的标签4】
6.【案例1:用户注册】
7.【案例2:用户注册改进】
8.【快速了解 CSS】
9.【常用选择器概念讲解】
10.【CSS基础样式介绍1】
11.【CSS基础样式介绍2】
12.【CSS基础样式介绍3】
13.【CSS基础样式介绍3】
14.【案例 小米商城头标】
15.【案例 小米商城头标总结】
16.【案例 小米商城二级菜单】
17.【案例 商品推荐部分】
18.【伪类简单了解】
19.【position】
20.【案例 小米商城中app图标代码】