孙肖宁

CSS3中的边框
边框圆角border-radius每个角可以设置两个值 ,x 值,y值。边框阴影box-shadow 与 tex...
扫描右侧二维码阅读全文
04
2018/06

CSS3中的边框

边框圆角

border-radius每个角可以设置两个值 ,x 值,y值。

边框阴影

box-shadowtext/shadow 用法差不多
取值:
1、水平偏移量, 正值向右 负值向左;
2、垂直偏移量, 正值向下 负值向上;
box-shadow: 5px 5px 27px red, -5px -5px 27px green;
3、模糊度是不能为负值;
4、inset可以设置内阴影;
设置边框阴影不会改变盒子的大小,即不会影响其兄弟元素的布局。
可以设置多重边框阴影,实现更好的效果,增强立体感。

边框图片

border-image: url("images/border.png") 27/20px round
border-image 设置边框的背景图片.
border-image-source:url(“”) 设置边框图片的地址.
border-image-slice:27,27,27,27浏览器会自动去裁剪图片.
border-image-width:20px;指定边框的宽度.
边框平铺的样式 border-image-repeat
stretch 拉升
round 会自动调整缩放比例
repeat重复
设置的图片将会被“切割”成九宫格形式,然后进行设置。
“切割”完成后生成虚拟的9块图形,然后按对应位置设置背景,
其中四个角位置、形状保持不变,中心位置水平垂直两个方向平铺。
提示:
1、roundrepeat之间的区别

  • round 会自动调整尺寸,完整显示边框图片。
  • repeat 单纯平铺多余部分,会被“裁切”而不能完整显示。

2、更改裁切尺寸

  • background-slice: 34 36 27 27 分别设置裁切
    关于边框图片重点理解9宫格的裁切及平铺方式,实际开发中应用不广泛,但是如能灵活动用会给我们带来不少便利。
Last modification:June 4th, 2018 at 03:11 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment