长按识别二维码关注
网站首页 >> 技术资料 >> 二类电商 >> div设置边框（div设置边框的代码）
在网页设计中经常用到css来设计各种边框样式以及颜色等，div设置边框，有时候需要一个div只显示一个边框，那么你可能会用到下面的一些方法。
div设置边框（div设置边框的代码）
一、CSSborder-width属性
border-width是实现显示边框的重要属性。用法如下：
border-width:toprightbottomleft
参数说明：
top：上边框属性，可以设置像素，也可以设置样式，意思为上边框的宽度。
right：右边框属性，可以设置像素，div设置边框，也可以设置样式，意思为上边框的宽度。
bottom：下边框属性，可以设置像素，也可以设置样式，意思为上边框的宽度。
left：左边框属性，可以设置像素，也可以设置样式，意思为上边框的宽度。
其中像素如：10px20px等
这节课，要学习如何调整网页元素的边距和边框。
使用css样式将工作经历和工作经验部分的文字大小修改为14px，文字颜色修改为#222222。
修改css文件，新增一个样式smallcontent2：
修改html文件，新增调用样式的div，同时将过长的代码行调整一下，增加换行，让代码不要太长，这样的调整并不影响页面显示：
刷新页面：
页面效果看起来越来越好了，但是发现标题部分的文字上下和左边没有一点空间，并且标题div距离浏览器的边缘还有一段空间，感觉不太好，div设置边框，如何修改呢？
一般使用css属性值width和height设置宽度和高度。
宽度和高度的值一般可以使用像素单位或者百分比单位。
修改css文件，设置标题bigtitle的width为50%:
我们只使用一个div，仅采用css实现饼状图。【如上图】
本文使用的是简写的变量，在生产环境中，为了达到可读性，我们应该使用--p->--percentage，--b->--border-thickness，--c->--main-color来表示。
我们为饼状图设定基本的样式。
.pie{--w:150px;//--w->--widthwidth:var(--w);aspect-ratio:1;//纵横比，1说明是正方形display:inline-grid;place-content:center;margin:5px;font-size:25px;font-weight:bold;font-family:sans-serif;}复制代码上面我们使用了aspect-ratio:1;保证div是正方形，div设置边框，当然你也可以使用height:var(--w)达到效果。
