css3新增邊框屬性

css3新增屬性🔑

• 邊框屬性
• 背景屬性
• 文字屬性
• 顏色屬性

邊框屬性🔨

屬性	說明
border-radius	設置邊框圓角
border-image	設置圖像邊框
border-shadow	設置邊框陰影

 

 

 

 

 

 

 

1. border-radius💡

border-radius屬性用於創建邊框圓角，默認值為none

單位： px 、 %

分樣式寫法：

• border-top-left-radius：單獨設置左上角圓角
• border-top-right-radius：單獨設置右上角圓角
• border-bottom-left-radius：單獨設置左下角圓角
• border-bottom-right-radius：單獨設置右下角圓角

復合屬性寫法：

• 一個值：同時設置四個角，且四個角都相同
• 兩個值：第一個值左上角和右下角，第二個值右上角和左下角
• 三個值：第一個值為左上角，第二個值為右上角和左下角，第三個值為右下角
• 四個值：分別對應左上角、右上角、右下角、左下角

例：

div{
    background-color: pink;
    width: 300px;
    height: 300px;
    border-radius: 20px;/* 一個值 */
    border-radius: 20px 60px; /* 兩個值 */
    border-radius: 10px 30px 50px; /* 三個值 */
    border-radius: 10px 20px 30px 40px;/* 四個值 */
}

注意：當盒子寬高相同時，設置border-radius:50%是圓形；當寬高不等則是橢圓形


2. border-image💡

border-image屬性用於設置圖像邊框

語法：

border-image: source slice width outset repeat;

• border-image-source：指定繪制邊框的圖像位置
• border-image-slice：圖像邊界向內偏移
• border-image-width：圖像邊界寬度
• border-image-outset：指定在邊框外部繪制 border-image-area 的量
• border-image-repeat：用於圖像邊界是否應重復（repeated）、拉伸（stretched）或鋪滿（rounded），默認值：stretch

例：

div{
    -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
    -o-border-image:url(border.png) 30 30 round; /* Opera */
    /* 復合樣式 */
    border-image:url(border.png) 30 30 round;  
    /* 分樣式 */
    border-image-source: url(border.png);/* 指定要使用的圖像 */
    border-image-slice: 50% 50%;/* 指定圖像的邊界向內偏移 */
    border-image-width: 1;/* 指定圖像邊界的寬度，默認值1 */
    border-image-outset: 30 30;/* 沒有單位 */
    border-image-repeat: repeat;/* 設置平鋪repeat，默認拉伸stretch */
}

3. box-shadow💡

box-shadow屬性用於設置盒子陰影，默認值none

語法：

box-shadow: h-shadow v-shadow blur spread color inset;

• h-shadow：設置水平陰影的位置（允許負值）*
• v-shadow：設置垂直陰影的位置（允許負值）*
• blur：陰影模糊距離
• spread：陰影大小
• color：陰影顏色
• inset： 設置內側陰影

例：

div{
    width: 200px;
    height: 200px;
    background-color: #eee;
    box-shadow: ;
    box-shadow: 0px 0px 10px 1px red inset;
}

 參考鏈接：https://www.w3cschool.cn/css3/css3-borders.html