django学习入门系列之第三点《边框及总结》

---

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图标代码】