CSS圓角矩形和外陰影效果是前端網頁UI設計中常用的元素，本文將通過p標簽和pre標簽來分別介紹它們的使用方法。

首先是圓角矩形效果，CSS可以使用border-radius屬性來設置圓角的大小，其值可以是像素，百分比或者em等單位。例如：

.mybox{
border-radius: 10px;
}

上述代碼表示為一個類名為mybox的div元素設置了10px的圓角。如果需要設置不同大小的圓角，可以使用border-top-left-radius，border-top-right-radius，border-bottom-left-radius和border-bottom-right-radius屬性分別設置。例如：

.mybox{
border-top-left-radius: 10px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 10px;
}

上述代碼表示為一個類名為mybox的div元素設置左上角和右下角為10px圓角，左下角和右上角為5px圓角。

其次是外陰影效果，CSS可以使用box-shadow屬性來設置元素的外陰影，其值包括水平和垂直方向的偏移量、模糊半徑、陰影擴散半徑和顏色等。例如：

.mybox{
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

上述代碼表示為一個類名為mybox的div元素設置了10px水平方向，10px垂直方向的陰影，模糊半徑為5px，陰影擴散半徑為0px，顏色為黑色（rgba(0,0,0,0.75)中的0.75表示透明度）。同時也可以設置多個陰影效果，用逗號分隔。例如：

.mybox{
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75), -10px -10px 5px 0px rgba(255,255,255,0.75);
}

上述代碼表示為一個類名為mybox的div元素設置了兩個陰影效果，一個黑色的右下陰影和一個白色的左上陰影。

綜上所述，CSS的圓角矩形和外陰影效果是實現網頁UI設計的重要元素之一，掌握其使用方法對前端工程師來說非常重要。