CSS3的边框样式

166 阅读1分钟

border-radius:

image.png 也可设置多个值:

  • 两个值时第一个值为左上右下 第二个值为右上左下
  • 三个值时第一个值为左上 第二个值为右上左下 第三个值为右下
  • 四个值时按照顺时针 左上右上右下左下来对应四个值 当元素的宽高相同时可以通过border-radius样式来设置成圆形

image.png

box-shadow:

image.png

  • inset 阴影类型内阴影
  • outset 阴影类型外阴影 (🔺把inset删除 默认就是outset 外阴影模式)
  • x-offset X轴位移,指定阴影水平位移量
  • y-offset Y轴位移,用来指定阴影垂直位移量
  • blur-radius 阴影模糊半径阴影向外模糊的模糊范围
  • color 阴影颜色,定义绘制阴影时所使用的颜色

background-size:

image.png

  • 直接设置两个值,第一个值设置宽度,第二个值设置的高度。
  • cover 会保持纵横比 会覆盖背景定位区域 但是图片会出现展示不全
  • contain 会保持纵横比 图片会全部展示出来 不会完全覆盖背景定位区域

background-origin:

image.png

  • padding-box背景图像会贴着内边距的内部来展示 也是默认的
  • border-box背景图像会贴在边框的内部来展示
  • content-box背景图像会贴在内容的内部来展示

background-clip:

image.png