标签：CSS3 圆角 盒子 边框 radius border 属性
简介：边框
圆角
盒子阴影
2.1 边框的三要素
border属性
border: 1px solid red;（分别是线宽度，线型，线颜色）
线型：
值 意义
solid 实线
dashed 虚线
dotted 点状线
边框三要素可以拆分为小属性：（小属性是为了可以层叠大属性，即在整体已经设置了颜色基础上，选择个别的层叠新颜色）
border-width 线宽
border-style 线型
border-color 线颜色
2.2 四个方向的边框
属性 意义
border-top 上边框
border-right 右边框
border-bottom 下边框
border-left 左边框
四个方向边框的三要素小属性：（也是专门用来层叠大属性）
属性
border-top-width 上边框宽度
border-top-style 上边框线型
border-top-color 上边框颜色
同理，还有右/下/左边框......
去掉边框：
border-left:none; 去掉左边框，以此类推
巧妙利用边框制作三角形
原理：盒子的宽度高度都是0，只有一条边框有颜色，其余都是透明；其中边框的宽度就是三角形的底边长。
.box1 {
width:0;
height:0;
/*transparent是透明色*/
border: 20px solid transparent;
border-top-color: red;
}
2.3 圆角
border-radius 属性（属性值通常为ps单位，表示圆角的半径） 比如 border-radius:10px; （这个数值越大，表示圆的程度越大）
正圆形：正方形盒子，当border-radius的属性值为正方形盒子宽度的一半
胶囊型：长方形盒子，当border-radius的属性值为长方形盒子宽度的一半
单独设置四个圆角
方法①border-radius: 10px 20px 30px 40px;（分别表示左上、右上、右下、左下）
方法②也可以使用小属性，border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-left-radius 左下角
border-bottom-right-radius 右下角
border-radius 属性值也可以用百分比做单位，表示圆角起始于每条边的哪里
比如 border-radius:20%;
正圆形：正方形盒子，当border-radius属性值为50%
椭圆形：长方形盒子，当border-radius属性值为50%
2.4 盒子阴影
box-shadow属性
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 10px 20px 30px 40px rgba(0,0,0,.4);（分别表示内阴影，x偏移，y偏移，模糊量，延展值，颜色）
应用上：比如电子商城里面，鼠标触摸一个盒子，这个盒子内部就会发白光。
多阴影
box-shadow属性值可以用逗号隔开多个，表示多个阴影
box-shadow: 2px 2px 30px red, 4px 4px 40px blue, 6px 6px 6px 50px green, inset 6px 6px 6px orange;
3.1 小结
重点：
1. 边框有哪三个要素？如何分别设置三个要素？常用线型有哪几种？
边框三要素：border-width,border-style,border-color
如何设置三要素：
常用线型有：solid实线，dashed虚线，dotted点状线
边框可以合写，比如 border: 1px solid red;
也可以分别设置四个方向的边框，比如 border top/ border right/ border bottom/ border left
也可以单独设置某个方向的小属性，比如 border-left-color设置左边框颜色，border-bottom-style设置下边框线型
2. 圆角如何设置？正圆形如何设置？
圆角使用border-radius属性设置，圆角以圆角半径px设置，或者用百分比设置
正圆形：正方形盒子，当border-radius属性值为50%
3. 阴影如何设置？
阴影使用box-shadow属性设置，属性值分别表示水平方向的位移，垂直方向的位移，模糊程度，延展程度，颜色
难点：
1. 如何用盒子制作三角形？
原理是：相邻的边是不一样的颜色，边的交界处会形成一条斜线
把盒子的宽度和高度都设置为0，其余不需要的边框都设置成透明色transparent
标签：CSS3,圆角,盒子,边框,radius,border,属性 来源： https://www.cnblogs.com/huazhi001/p/16226539.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。