CSS HTML Border Rounded

一、圓角邊框

圓角邊框是CSS中一種常見的效果，它可以為HTML元素的邊框添加圓角。通過使用border-radius屬性，我們可以為元素的四個角分別設置圓角半徑。

    
        /* 給元素添加圓角邊框 */
        border-radius: 10px;
        /* 分別為元素的四個角設置圓角半徑 */
        border-radius: 10px 20px 30px 40px;
    

其中，第一個值對應左上角，順時針方向分別對應右上角、右下角和左下角的圓角半徑。我們也可以通過使用border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius來單獨設置元素角的圓角半徑。

二、透明度

通過設置CSS的opacity屬性，可以為HTML元素添加透明效果，取值範圍為0~1，其中0表示完全透明，1表示不透明。

    
        /* 設置元素透明度為50% */
        opacity: 0.5;
    

需要注意的是，透明度會同時影響元素及其子元素。如果需要為子元素單獨設置透明度，可以使用rgba顏色值，其中a表示透明度，取值範圍同樣為0~1。

    
        /* 設置背景顏色為紅色，透明度為50% */
        background-color: rgba(255, 0, 0, 0.5);
    

三、陰影效果

通過使用CSS的box-shadow屬性，可以為HTML元素添加陰影效果。

    
        /* 添加一個水平偏移量為10px，垂直偏移量為10px，模糊半徑為5px，顏色為黑色的陰影效果 */
        box-shadow: 10px 10px 5px #000;
    

box-shadow屬性接受多個值，用逗號分隔。第一個值為水平偏移量，第二個值為垂直偏移量，第三個值為模糊半徑，第四個值為陰影顏色。

四、邊框圖像

邊框圖像是一種特殊的邊框效果，可以為HTML元素的邊框添加複雜的背景圖像。

    
        /* 設置元素邊框為10px的圓角邊框，邊框圖像為radial-gradient */
        border-radius: 10px;
        border-image: radial-gradient(circle at top left, #00f, #0f0, #f00) 1;
    

其中，radial-gradient是一個徑向漸變的背景圖像，circle at top left表示漸變從左上角開始，#00f、#0f0和#f00分別為漸變的起始、中間和結束顏色。1表示邊框圖像的寬度，可以根據需要調整。

五、圓角圖片

通過使用CSS的border-radius屬性，可以為HTML元素添加圓角邊框，同樣的，我們也可以將這種效果應用到圖片上，實現圓角圖片的效果。

    
        /* 設置圖片顯示為圓形 */
        border-radius: 50%;
    

其中，50%表示圓形的半徑，可以根據需要調整。需要注意的是，應用border-radius屬性後，圖片的位置可能會發生改變，可以通過設置position、top和left屬性來調整圖片的位置。