版权所有 © 2007-2017 致远建站 冀ICP备14009060号-1

2.css3中的边框

2017-05-24 115

CSS3 圆角

在CSS2中添加圆角棘手。我们不得不在每个角落使用不同的图像或者用js来处理。在CSS3中,却很容易创建圆角。

border-radius:支持绝对值和百分比
border-radius: 50px;4个角一致
border-radius:10px 50px;左上右下10px,右上左下50px(左上、右上、右下、左下)
border-radius:10px/50px;4个角一致,水平10px,垂直50px
border-top-left-radius:左上
border-top-right-radius:右上
border-bottom-right-radius:右下
border-bottom-left-radius:左下

CSS3盒阴影

box-shadow是不会占据位置的,也就是不会影响布局,这一点很方便我们布局页面。

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

CSS3边界图片

ie11以上版本才支持。个人觉得价值也不大,会用即可,自行判断吧

border-image: source slice width outset repeat;
source 用于指定要用于绘制边框的图像的位置
slice 图像边界向内偏移
width 图像边界的宽度
outset 用于指定在边框外部绘制 border-image-area 的量
repeat 这个例子演示了如何创建一个border-image 属性的按钮。

这个还不错哦~赏你点小钱吧!
支付宝打赏
微信打赏