css3入门(5)边框,圆角及阴影

边框(三要素)

宽度

  • border-width
  • 单位是px

线型

  • border-style
  • solid实线
  • dashed虚线
  • dotted点状线

颜色

  • border-color
  • 就是普通的颜色
  • transparent(透明色)
书写小属性的好处是可以层叠通用属性,用于调个别样式

四个方向的边框

  • border-top
  • border-right
  • border-bottom
  • border-left
  • 也可有分别的小属性
    css3入门(5)边框,圆角及阴影
去掉某方向边框

border-left:none;

用边框制作三角形

  • 原理是边框是盒子高度宽度为0,只留下一边的边框
  • 不能去掉边框,去掉就不会出现斜线了

圆角

  • border-radius
    单位通常是px,表示圆角的半径
    css3入门(5)边框,圆角及阴影
  • 也可以用百分比为单位
    如果正方形设置50%就是正圆
    如果长方形设置50%就是椭圆

分别设置圆角

  • border-radius:10px 20px 30px 40px
    左上 右上 右下 左下
  • 也可以使用小属性,描述上下的在前,左右的在后
    css3入门(5)边框,圆角及阴影

阴影

  • box-shadow
  • box-shadow:10px 20px 30px rgba(0,0,0,.4)
    ************** x偏移 y偏移 模糊量 颜色

延展值

  • 如果在30px后面加一个值,他就会向四个方向延展

内阴影

  • 在最前面加inset

多阴影

  • 用逗号分隔接着写即可
上一篇:VS中安装DevExpress后在Winform的工具箱中不显示控件


下一篇:C#-UWP图像资产在运行时不可见