其他分享
首页 > 其他分享> > 第3周 CSS3浮动定位与背景样式 第2节边框与圆角

第3周 CSS3浮动定位与背景样式 第2节边框与圆角

作者:互联网

简介:
边框
圆角
盒子阴影  
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