CSS之border
阿新 • • 發佈:2017-10-18
tran 變色 parent double 屬性 blue -c csdn position
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;
}
CSS之border