# Day15 CSS基础设定_5
今天要来介绍网页常用的元素border，边框的意思。
border
我们今天要建立一个简单的栏位版型搭配边框。会有一张图片、图片介绍跟边框。
<style>
.wrap{
width: 255px;
height: 255px;
margin: auto;
margin-top: 30px;
}
</style>
<body>
<div class="test">
<div class="wrap">
<div class="item">
<img src="https://picsum.photos/id/237/250/250" alt="">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur, voluptatem reiciendis provident aliquid perferendis accusantium quis in explicabo placeat at dignissimos quasi ex neque voluptas ab nostrum molestiae commodi nemo!</p>
</div>
</div>
</div>
</body>
目前出来的结果是这样，而我们要帮他加上边框，要注意的是，我有link一个reset.css的样式，我们後续会介绍这个东西是做甚麽用的!还有要设定宽高时要注意还要加上border的宽度!
.item{
border: solid black;
}
border属性介绍
边框:单位大小 线的样式(单线、虚线、双线) 颜色
border: 5px solid black;
这样有比较了解边框可以设定甚麽吗!
是不是有点挤，我们在段落p加上padding!这样看起来就会舒服多了。
p{
padding: 5px;
}
border圆角
border还有可以设定圆角的属性!
边框-圆角:单位大小;
border-radius: 12px;
.item{
border: 4px solid black;
border-radius: 12px;
overflow: hidden;
}
img{
width: 100%;
}
再加上这些属性以後就会有圆角的边框，看起来滑润多了!图片设定100%是为了要满版!而设定overflow:hidden是为了不要图片切出边框。之後会说明这个属性。
如果想要让图片有立体感呢?我们可以利用阴影box-shadow
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
加上这行後，试试看让你的图片有浮起来的效果!
box-shadow:inset offset-x offset-y blur-radius spread-radius 阴影颜色;
让我来为你解释这些意思!
inset是指你要内框阴影还是外框阴影。
offset-x是指水平轴的阴影大小。单位(px、em)。
offset-y是指垂直轴的阴影大小。单位(px、em)。
blur-radius是模糊半径。可填可不填、看需求、预设0。
spread-radius是扩散半径。可填可不填、看需求、预设0。
阴影颜色可自行设定!必要项目。
快试试看你做出来是不是跟我一样的效果呢!
那今天的教学就到这罗!
<<: D3JsDay14不想图表被冰冻，那就做一点互动—事件互动
爬虫怎麽爬 从零开始的爬虫自学 DAY3 开发环境-2 安装Visual Studio Code
前言 各位早安，昨天我们一起安装好了python，接下来今天我们要搞定Visual Studio C...
[2021铁人赛 Day-01] 前言 and 嵌入式系统简介
前言 大家好，我是 Kevinyu，就像我的参赛题目所描述的 虽然学习资讯领域的相关知识，也碰过树梅...
[Day2] 电脑视觉下的人脸
万般皆是脸 注：在接下来的内容里，我会着重在"图片"下的人脸辨识 (包含摄影机...
玩转 Storybook: Day 27 Design System for Developers - Review、Test
单一真值来源 或 单点故障 Single Source of Truth (SSOT) 单一真值来源...
Day 2 : Odoo = 免费且完整的ERP + 完善的开发平台 + 第三方的免费Addon + 多人参与的商城
自我学习过程 5年前透过学校老师的介绍，重新再次认识及了解Odoo，印象中那时 Open ERP 己...