CSS 第004篇 边框-理论

>1 边框属性

a、圆角边框属性：border-radius: 1-4 length|% / 1-4 length|%;

注意: 每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

值	描述
length	定义弯道的形状。
%	使用%定义角落的形状
border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius	四个角

 

 

b、边框盒阴影属性：box-shadow: h-shadow v-shadow blur spread color inset;

注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。 

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。CSS颜色列表中寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影、

 

c、边界图片属性：border-image: source slice width outset repeat;

border-image属性是速记属性用于设置 border-image-source, border-image-slice, border-image-width, border-image-outset 和border-image-repeat 的值.

值	描述
border-image-source	用于指定要用于绘制边框的图像的位置，语法：border-image-source: none|image; none:没有图片 image:图片
border-image-slice	图像边界向内偏移，语法：border-image-slice: number|%|fill;    number：数字表示图像的像素（位图图像）或向量的坐标（如果图像是矢量图像）； %：百分比图像的大小是相对的：水平偏移图像的宽度，垂直偏移图像的高度； fill：保留图像的中间部分；   此属性指定顶部，右，底部，左边缘的图像向内偏移，分为九个区域：四个角，四边和中间。图像中间部分将被丢弃（完全透明的处理），除非填写关键字。如果省略第四个数字/百分比，它和第二个相同的。如果也省略了第三个，它和第一个是相同的。如果也省略了第二个，它和第一个是相同的。
border-image-width	图像边界的宽度，语法：border-image-width: number|%|auto;   number：表示相应的border-width 的倍数 %：边界图像区域的大小：横向偏移的宽度的面积，垂直偏移的高度的面积 auto：如果指定了，宽度是相应的image slice的内在宽度或高度   border-image -width的4个值指定用于把border图像区域分为九个部分。他们代表上，右，底部，左，两侧向内距离。如果第四个值被省略，它和第二个是相同的。如果也省略了第三个，它和第一个是相同的。如果也省略了第二个，它和第一个是相同的。负值是不允许的。
border-image-outset	用于指定在边框外部绘制 border-image-area 的量，语法：border-image-outset: length|number;   number：代表相应的border-width 的倍数   border-image-outset用于指定在边框外部绘制 border-image-area 的量。包括上下部和左右部分。如果第四个值被省略，它和第二个是相同的。如果也省略了第三个，它和第一个是相同的。如果也省略了第二个，它和第一个是相同的。不允许border-im-outset拥有负值。
border-image-repeat	设置重复图像的方式，语法：border-image-repeat: stretch|repeat|round|initial|inherit;   stretch：默认值，拉伸图像来填充区域​​​​​​​ repeat：平铺（repeated）图像来填充区域。​​​​​​​ round：类似 repeat 值，如果无法完整平铺所有图像，则对图像进行缩放以适应区域。 space：类似 repeat 值，如果无法完整平铺所有图像，扩展空间会分布在图像周围 initial：将此属性设置为默认值，保持原始颜色。 inherit：从父元素中继承该属性。

 

---

一直在路上，自律，坚持