前言
在网页设计中，边框与圆角不仅仅是简单的装饰元素，更是页面设计的一部分。它们可以打破刻板印象，赋予页面更丰富的表现力。就像调色板上的细节，CSS3中的边框与圆角技术为设计师提供了一支强大的画笔。让我们一同揭开这场设计的魔法帷幕。
边框的三要素
border：1px solid #000 (线宽度、线型、线颜色)
边框的三要素小属性
可以拆分为小属性
四个方向的边框
四个方向边框的三要素小属性
去掉边框
border-left:none ; 这个属性可去掉左边框，以此类推
利用边框制作三角形
.box{ width:0; height:0; /*transparent是透明色*/ border:20px solid transparent; border-top-color:red; }
圆角 border-radius
border-radius属性的值通常为px单位，表示圆角的半径
border-radius:10px
单独设置四个圆角
border-radius：10px 20px 30px 40px; (左上 右上 右下 左下)
小属性
百分比为单位
border-radius属性的值也可以用百分比做单位，表示圆角起始于每条边的哪里
border-radius:20%
正方形盒子如果设置的border-radius属性为50%；就是正圆形
长方形盒子如果设置的broder-radius属性为50%，就是椭圆形
盒子阴影
box-shadow:10px 20px 30px rgba(0,0,0,.4); (x偏移、y偏移、模糊量、颜色)
阴影延展
box-shadow:10px 20px 30px 40px rgba(0,0,0,.4); (x偏移、y偏移、模糊量、阴影延展：同时向四个方向延展、颜色)
内阴影
box-shadow属性值前加inset单词，表示内阴影
box-shadow:inset 10px 20px 30px 40px rgba(0,0,0,.4)
多阴影
box-shadow属性值可以用逗号隔开多个，表示携带多个阴影
box-shadow:10px 20px 30px rgba(0,0,0,.4),10px 20px 30px rgba(0,0,0,.4),inset10px 20px 30px rgba(0,0,0,.4);
结语
通过深入了解CSS3中关于边框与圆角的知识，你将能够为你的网页设计增色不少。这些看似微小的设计细节，却能产生令人惊艳的效果。让我们一同在这个边框与圆角的设计世界里畅游，为用户带来更精致的视觉体验。
