CSS之border
来源:互联网 发布:sai mac软件下载 编辑:程序博客网 时间:2024/06/10 23:17
1.border-width 不支持百分比
属性:thin:1px medium:3px(默认) thick:5px
2.border-style:double双线
实现三条横线分开
{
width:120px;height:120px;
border-top:60px double;
border-bottom:20px solid;
}
3.border-color与color
两者一样,
.add{
color:#ccc'
transition:color .25s;
border:1px solid
}
.add:hover{
color:#06c
}
只在父元素上设置color就可以实现全部元素hover变色
4.border与background定位
(1)background-position默认相对左上方定位的
(2)利用border实现相对右边定位
{
border-right:50px solid transparent
background-position:100% 40px;
}
5.border与三角灯图形构建
.a{
width: 100px;
height: 100px;
border: 100px solid;
border-color: red green blue orange;
}
改变宽度和高度和border-color,可以实现不同形状的改变。
6.实现梯形
.a{
width: 600px;
border:100px solid;
border-color: transparent transparent #c00;
}
阅读全文
0 0
- CSS之border-width
- css之border边框
- css之border&三角形
- CSS之border
- CSS解读之border属性
- css之border/padding/margin
- css 之 border-radius属性
- CSS+DIV之强化border属性
- CSS 之 width padding margin border
- css盒子模型之边框(border)
- CSS Border
- css-border
- CSS-border.
- CSS border与非CSS border
- CSS解读之border属性的其他用途
- 学习笔记之CSS padding margin border属性详解
- CSS之使用、语法、选择器、border与box、背景
- 干货分享 | 玩坏css之border-radius属性
- JVM_3_OutOfMemoryError异常
- Junit 测试中新启动线程问题
- 1017. A除以B (20)
- centos7 搭建WEB服务器
- POJ 2063 Investment 完全背包
- CSS之border
- ssh框架Struts2 简单应用
- TCP连接的三次握手和四次握手
- 1179;构造表达式
- leetcode 134. Gas Station 加油站问题
- javap -c命令关键字的含义
- 线性表Test2(约瑟夫环)
- 1013数素数(素数)
- Win10下python3和python2同时安装并解决pip共存问题