微信小程序：border属性

Posted 2021-08-28 wuwuFQ

border

border:5px solid red;

//可以设置的属性分别（按顺序）：border-width, border-style,和border-color。
//如果上述值缺少一个没有关系，例如border：＃FF0000;是允许的。
也可以单独设置四个边：border-top，border-bottom，border-left，border-right

border-width

• border-width:thin medium thick 10px;

  • 上边框是细边框
  • 右边框是中等边框
  • 下边框是粗边框
  • 左边框是 10px 宽的边框

• border-width:thin medium thick;

  • 上边框是细边框
  • 右边框和左边框是中等边框
  • 下边框是粗边框

• border-width:thin medium;

  • 上边框和下边框是细边框
  • 右边框和左边框是中等边框

• border-width:thin;

  • 所有4个边框都是细边框

值	描述
thin	定义细的边框。
medium	默认。定义中等的边框。
thick	定义粗的边框。
length	允许您自定义边框的宽度。
inherit	规定应该从父元素继承边框宽度。

border-style

• border-style:dotted solid double dashed;

  • 上边框是点状
  • 右边框是实线
  • 下边框是双线
  • 左边框是虚线

• border-style:dotted solid double;

  • 上边框是点状
  • 右边框和左边框是实线
  • 下边框是双线

• border-style:dotted solid;

  • 上边框和下边框是点状
  • 右边框和左边框是实线

• border-style:dotted;

  • 所有4个边框都是点状

值	描述
none	定义无边框。
hidden	与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

border-color

• border-color:红，绿，蓝,粉红色;
  • 上边框是红色
  • 右边框是绿色
  • 底部边框是蓝
  • 左边框是粉红色
• border-color：红，绿，蓝;
  • 上边框是红色
  • 左，右边框是绿色
  • 底部边框是蓝
• border-color：红，绿;
  • 顶部和底部边框是红色
  • 左右边框是绿色
• border-color：红色;
  • 所有四个边框是红色

值	说明
color	指定背景颜色。在CSS颜色值查找颜色值的完整列表
transparent	指定边框的颜色应该是透明的。这是默认
inherit	指定边框的颜色，应该从父元素继承

border-radius

 1. border-radius:25px;
 2. border-radius: 1-4 length|% / 1-4 length|%;
 3. border-radius:50%;
 4. border-top-left-radius:2em;
	border-top-right-radius:2em;
	border-bottom-right-radius:2em;
	border-bottom-left-radius:2em;

border-collapse

值	说明
collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性
separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性
inherit	规定应该从父元素继承 border-collapse 属性的值

border-image

-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;

值	描述
border-image-source	用在边框的图片的路径。
border-image-slice	图片边框向内偏移。
border-image-width	图片边框的宽度。
border-image-outset	边框图像区域超出边框的量。
border-image-repeat	图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。