css3中边框的总结
来源:互联网 发布:感恩知报的反义词 编辑:程序博客网 时间:2024/05/16 08:55
css3中边框的总结
css3中的很多方法很好用,减少了在以前只能用ps来拼图,比如圆角……不过要注意的就是兼容的问题;
- border-radius(对边框圆角)//可以用数值或者百分比
- border-radius:属性是一个简写的属性,
- 如果后面带一个值,表示四个角都按那个值来倒角,
- 如果是两个值,前面那个值是左上/右下,后面那个是右上/左下;(带三个值,四个值)
- border-bottom-right-radius: 4em 0.5em;对单个角的控制这是(下面,右面)那个角;
- 上面的后面那个值,是垂直方向的值,如果等于前面那个值,那么就是正规的倒角,如果小于前面那个值,则在正规倒角的位置下移,反之……
- box-shadow
- box-shadow: h-shadow v-shadow blur spread color inset;
- 前两个参数为必填(可为正负,改变阴影的位置),
- 第三个参数是模糊的程度;(可填)
- 第四个参数是阴影的尺寸;(可填)
- 第五个是阴影的颜色;(可填)
- 第六个是将外部阴影改成内部阴影;(可填)
- border-image
- border-image-source
- url()
- 图片剪裁位置(border-image-slice)
- 支持数字和百分比,如果是四个数(上、右、下、左),三个,两个,一个;
- 重复性(border-image-repeat) round(平铺)和stretch(拉伸)。其中,stretch是默认值。
- 平铺可能会改变了原图片显示的大小(图形完整),重复不改变图片显示的大小(最后可能会有半截图:就像给地板贴瓷砖,最后多余的会切掉)。
- border-image:url(border.png) 30% 40%;就等同于border-image:url(border.png) 30% 40% stretch stretch;(后面两个stretch可以任意改:30% 40% stretch repeat;)
- border-image-source
0 0
- css3中边框的总结
- Css3中边框的处理
- css3边框总结
- css3中边框的4种样式
- css3中边框的4种样式
- CSS3的边框
- 【CSS3】边框--慕课网【学习总结】
- CSS3的边框(一)
- CSS3的边框(二)
- CSS3的边框(三)
- CSS3的边框(四)
- HTML中table边框的显示总结
- HTML中table边框的显示总结
- CSS3 边框
- css3 边框
- css3边框
- CSS3 边框
- CSS3边框
- HDU 1042 N!
- Effective C++读后感:以const,enum,inline替换#define
- android上传文件问题及措施
- 用Hashtable实现字符串中字符的个数的查询
- [LeetCode 129]Sum Root to Leaf Numbers
- css3中边框的总结
- 转载09:程序员必读书单(满满的干货)
- 找回MD5加密的密码及MD5加密数据库中数据
- 如何合理的使用blob字段
- 计算机网络基础1
- opencv图像角点提取
- 动态库,静态库,动态链接,静态链接
- Light OJ 1129 (Tire树)
- MyEclipse中导入项目时出现乱码的解决方案