边框圆角与盒子阴影

Frank
  • 前端基石
  • CSS3
大约 1 分钟约 445 字...

边框

边框的三要素

  • border 属性
border: 1px solid red //  线宽度 线型  线颜色 ;
  • 线型
  1. solid 实线
  2. dashed 虚线
  3. dotted 点状线
  • 边框的三要素可以拆分为小属性
  1. border-width 线宽
  2. border-style 线型
  3. border-color 线颜色

四个方向的边框

border-top //上边框
......

  • 同样,四个方向边框的三要素也可以拆分为小属性
border-top-width //上边框宽度
border-top-style //上边框线型
......
  • 去掉边框
border-left: none // 属性即可以去掉左边框,以此类推;; ; ;
  • 利用边框制作三角形
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
  • 在给表格加边框时,消除边框之间的缝隙:

    table {
      border-collapse: collapse;
    }
    

圆角

border-radius 属性

border-radius 属性的值通常为 px 单位。表示圆角的半径。

border-radius: 10px;

单独设置四个圆角

border-radius: 10px 20px 30px 40px // 左上 右上 右下 左下 ;

也可以利用小属性单独设置四个圆角

border-top-left-radius //左上角

百分比为单位

border-radius 属性的值也可以用百分比做单位,表示圆角起始于每条边的哪里。

正圆形

border-radius: 50%;

盒子阴影

box-shadow 属性

box-shadow 属性用来实现盒子的阴影

box-shadow: 10px 20px 30px rgba(0, 0, 0, 0.4);
// x偏移,y偏移,模糊量,颜色

阴影延展

box-shadow: 10px 20px 30px 40px rgba(0, 0, 0, 0.4);

内阴影

box-shadow: inset 10px 20px 30px 40px rgba(0, 0, 0, 0.4);

多阴影

box-shadow 属性值可以用逗号隔开多个,表示携带多个阴影

box-shadow: 10px 20px 30px 40px blue, 10px 20px 100px 40px green;
上次编辑于:
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.14.1