CSS3总结——边框与圆角
来源:互联网 发布:教育软件上市公司 编辑:程序博客网 时间:2024/06/05 20:09
CSS3圆角
border-radius (IE9+)
可以为元素添加圆角边框
语法:
border-radius : length | %
多个值
- 4个值 (左上角 右上角 右下角 左下角) - 3个值 (左上角 右上和左下角 右下角 ) - 2个值 ( 左上和右下角 , 右上和左下角)
如果设置为50%,宽高不一样的情况下变椭圆,宽高一样变圆。
其他属性:
border-top-left-radius 左上角弧度border-top-rightt-radius 右上角弧度border-bottom-right-radius 右下角弧度border-bottom-left-radius 左下角弧度
CSS3盒阴影
box-shadow (IE9+)
可以设置一个或多个阴影
语法:
box-shadow: h-shadow v-shadow blur spread color inset ; 水平 垂直 模糊 阴影大小 内部阴影
注: inset可以改为 outset(外阴影),如果不设置默认是outset。
box-shadow: 50px 30px 10px 10px yellow ;
CSS3边界图片
border-image (非IE、非Opera)
语法:
border-image: source slice width outset repeat
source 图片路径
如: url(“border.jpg”);
slice 图片边界向内偏移
值:数值、百分比、fill。
width 图片宽度
值:数字、百分比、auto
repeat 是否重复
值:
stretch (拉伸)
round (铺满)
repeat (重复)
阅读全文
0 0
- CSS3总结——边框与圆角
- CSS3边框与圆角
- CSS3基础——尺寸与边框
- CSS3圆角边框
- css3边框总结
- css3.0 边框圆角
- css3设置圆角边框
- CSS3边框圆角实现
- CSS3边框和圆角
- CSS3基础——尺寸与边框2
- css3边框——圆角效果(border-radius)、阴影(box-shadow)、边框应用图片(border-image)
- css3中边框的总结
- 【CSS3】边框--慕课网【学习总结】
- CSS3之边框圆角:border-radius
- border-radius 圆角边框(CSS3.0)
- css3.0:border-radius 圆角边框
- css3:border-radius圆角边框详解
- CSS3第二日--圆角边框
- iOS 向后台发送json数据
- Toast
- PHP编码转换之iconv
- Tkinter之Entry篇
- ceph集群状态持续监控
- CSS3总结——边框与圆角
- QT QTextEdit中超链接
- CentOS基础命令总结
- C#类型转换
- WOJ1289-DNA
- Codeforces Round #433 div2 C,D 题 题解
- mysql保存emoji表情
- Android手持机扫码获取数据
- HTML中marquee介绍