在CSS中,為元素設置邊框是非常常見的操作,下面就介紹一下如何設置邊框:
/* 設置邊框樣式 */ border-style: solid; //實線 border-style: dotted; //點線 border-style: dashed; //虛線 border-style: double; //雙線 border-style: groove; //凹槽線 border-style: ridge; //凸槽線 border-style: inset; //內嵌線 border-style: outset; //外嵌線 border-style: none; //無邊框 /* 設置邊框寬度 */ border-width: 1px; //1像素寬 border-width: medium; //中等寬度 border-width: thin; //細線 border-width: thick; //粗線 /* 設置邊框顏色 */ border-color: #000000; //黑色 border-color: red; //紅色 border-color: rgb(255, 255, 255); //白色 border-color: rgba(0, 0, 0, 0.5); //黑色,透明度為50% /* 設置四個邊框的具體樣式 */ border-top: 1px solid black; //設置頂部邊框為1像素寬的黑色實線 border-right: 2px dotted red; //設置右側邊框為2像素寬的紅色點線 border-bottom: 3px dashed blue; //設置底部邊框為3像素寬的藍色虛線 border-left: 4px double green; //設置左側邊框為4像素寬的綠色雙線
除了以上介紹的常見設置方式外,還可以通過CSS3的border-radius
屬性設置圓角邊框,通過border-image
屬性設置圖片邊框等特效。使用這些屬性,可以讓邊框設計更加有趣、華麗。