CSS-边框

边框圆角

将直角的边框变为圆角的边框

格式

单独设置

border - xx(top/bottom) - xx(left/right) - radius

注意 :

• 接收两个参数, 第一个表示水平方向, 第二个表示垂直方向
• 如果只传递了一个参数, 那么出自方向和水平方向的值一样

连写

border-radius: 左上 右上 右下 左下;

注意 :

• 当只设置了一个值的时候, 其它三个角都会参考这个值
• 当省略了某一个角的值之后, 系统会自动参考对角的值
• 当边框圆角的值 > 边框宽度的时候, 外边框和内边框都会变成圆角
• 当边框圆角的值 <= 边框宽度的时候, 外边框是圆角, 内边框是直角

将正方形变为圆形

border-radius: 50%;

系统绘制方法

首先根据指定的值找到圆心 , 按照指定的值作为半径绘制圆弧

边框图片

属性

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

border-image-source

border-image-source: url("images/border.jpg");

注意 :

• 如果只通过source指定了哪一张图片作为边框的图片, 默认情况下会将图片放到边框的四个顶点
• 如果设置了边框图片, 那么就不显示边框颜色, 边框图片的优先级高于边框颜色

border-image-slice

告诉浏览器如何对指定的边框图片进行切割

border-image-slice: 100 100 100 100;

注意 :

• 不带单位 -
• 在后面加fill会将图片填满 , 默认中间是不会填充的

border-image-width

告诉浏览器边框图片显示的宽度, 并不是指定边框的宽度

border-image-width: 10px;

注意 : 如果通过border-image-width指定了边框图片的宽度, 那么默认的边框宽度就会失效

border-image-outset

告诉浏览器边框图片需要向外移动多少

border-image-repeat: 上   右   下   左;

border-image-repeat

告诉浏览器除了边框图片四个角以外的图片如何填充, 默认是拉伸

border-image-repeat: repeat / round / stretch;

border-image连写

border-image: 资源地址 切割方式 填充模式;

border-image: url("images/border.jpg") 70 fill repeat;