巧妙用css border属性实现规则图形
来源:互联网 发布:淘宝售后服务有哪些 编辑:程序博客网 时间:2024/05/15 08:37
首先:一个例子:
#div1 {
height:20px;
width:20px;
border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
border-style:solid;
border-width:20px;
}
此代码的效果图为:
中间白色为宽高各为20px的div1。
那么问题来了,要实现三角号,只需将div宽高设置为0,然后只设置一边的border显示即可
代码如下:
#div2 {
height:0;
width:0;
overflow: hidden;
border:20px dashed transparent;
border-top:20px solid #FF9600;
}
问题:这样设置整个div的宽高是40*40;如果不想要多余占位,可设置border-width:20px 20px 0; border-style:solid; border-color:#ff9600 transparent transparent;( 等同于只设border-top-color:#ff9600;)
其次:再一个例子:
跟上面类似,width:0; height:0;border:20px dashed transparent; border-color:green red green red; border-width:0 20px 20px 20px;
样式如下:
如果有两边border-width:0;
样式如下:
做翻页效果时修改border-width值即可实现。
0 0
- 巧妙用css border属性实现规则图形
- CSS border 属性及用border画各种图形
- border属性实现三角、圆角图形
- 用css的border属性实现三角 转
- 用css的border属性实现tip三角
- css---border属性实现小三角型
- css---border属性实现小三角型
- 用CSS border相关属性画三角形
- 用css的border属性画三角形
- css中的border属性
- CSS border 属性
- CSS border-collapse 属性
- CSS border-width 属性
- 重温CSS:Border属性
- CSS border-style 属性
- 理解css border属性
- CSS border-collapse 属性
- css border 属性
- java web 交流群 里面好多资源
- 无线APP开发过程中的省电原则
- 好烦啊 ds dt dr
- linux 相关
- Java中的迭代器Iterator和for-each循环
- 巧妙用css border属性实现规则图形
- 权限管理页面,ajax异步刷新,获取当前用户权限-checkbox显示已选
- svn执行上下文错误:由于目标计算机积极拒绝,无法连接
- setSystemUiVisibility() 与 getSystemUiVisibility() 显示隐藏状态栏
- 一切成功源于积累——20141202 经典诱空技术 美日 美加
- JFreeChart 参数配置
- 黑马程序员-多线程
- World Wind Java开发之七——读取本地栅格文件(影像+高程)构建三维场景
- MVC上传图片