在css中,可以使用border-radius屬性為圖片設定圓角,只需要給圖片元素設定「border-radius:數值;」樣式即可。為此屬性提供一個值,就能同時設定四個圓角的半徑,所有合法的CSS度量值都可以使用。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
CSS3圓角只需設定一個屬性:border-radius(意義是"邊框半徑")。你為這個屬性提供一個值,就能同時設定四個圓角的半徑。所有合法的CSS度量值都可以使用:em、ex、pt、px、百分比等等。
範例:
<!DOCTYPE html> <html> <head> <base target="_self"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache,must-ridate"> <meta http-equiv="expires" content="0"> <title>设置背景圆角</title> <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css" /> <style type="text/css"> .normal{ background-image: url(images/rest.png); width: 215px; height: 215px; border-radius: 50%; background-size: 215px; background-repeat: no-repeat; background-position-y: 9%; } </style> </head> <body> <!-- 原图尺寸是:599*531px的 --> <div></div> <script type="text/javascript" src="jquery/jquery.min.js"></script> <script type="text/javascript" src="bootstrap/bootstrap.min.js"></script> </body> </html>
原圖:
#設定背景之後的效果:
推薦學習:css影片教學
以上是css如何為圖片設定圓角的詳細內容。更多資訊請關注PHP中文網其他相關文章!