CSS總結 -邊框
阿新 • • 發佈：2020-10-26
CSS3 邊框
| 屬性 | 說明 |
|---|---|
| border-image | 設定所有邊框影象的速記屬性。 |
| border-radius | 一個用於設定所有四個邊框- *-半徑屬性的速記屬性 |
| box-shadow | 附加一個或多個下拉框的陰影 |
CSS3 圓角 - border-radius
| 屬性 | 說明 |
|---|---|
| border-top-left-radius | 定義了左上角的弧度 |
| border-top-right-radius | 定義了右上角的弧度 |
| border-bottom-right-radius | 定義了右下角的弧度 |
| border-bottom-left-radius | 定義了左下角的弧度 |
- 例項
在div中新增圓角元素：
div
{
border:2px solid;
border-radius:25px;
}
指定背景顏色的元素圓角：
div {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
指定邊框的元素圓角:
div {
border-radius: 25px;
border: 2px solid #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
指定背景圖片的元素圓角:
div {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
四個值 - border-radius: 15px 50px 30px 5px:
div {
border-radius: 15px 50px 30px 5px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
三個值 - border-radius: 15px 50px 30px:
div {
border-radius: 15px 50px 30px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
兩個值 - border-radius: 15px 50px:
div {
border-radius: 15px 50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
建立橢圓邊角:
div {
border-radius: 50px/15px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
div {
border-radius: 15px/50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
div {
border-radius: 50%;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
CSS3 盒陰影 - box-shadow
- 例項
CSS3 中的 box-shadow 屬性被用來新增陰影:
div
{
box-shadow: 10px 10px 5px #888888;
}
CSS3 邊界圖片 - border-image
- 例項
在 div 中使用圖片建立邊框
div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}