css如何為圖片設定圓角
在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如何為圖片設定圓角的詳細內容,更多請關注php中文網其它相關文章!
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/4822/viewspace-2827758/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- iOS圖片設定圓角iOS
- iOS圖片設定圓角效能問題iOS
- 分享 用CSS實現無圖片圓角效果CSS
- Glide實現圓角圖片,以及圓形圖片IDE
- PS製作圓角圖片
- CSS不用背景圖片實現優惠券樣式反圓角,凹圓角,反向半圓角,並且背景漸變CSS
- android 圓角圖片 處理Android
- CSS圓形圖片效果CSS
- 自定義drawable實現圓角圖片
- 自定義view實現圓角圖片View
- 筆記-iOS設定圓角方法以及指定位置設圓角筆記iOS
- iOS-高效設定圓角iOS
- Android Xfermode 實戰 實現圓形、圓角圖片Android
- ios實現圖片圓角方式小計iOS
- CSS 設定<img>圖片樣式CSS
- html+css 設定背景圖片HTMLCSS
- CSS設定背景圖片程式碼CSS
- CSS 文字框圓角CSS
- css3圓角CSSS3
- button設定邊寬和圓角
- UIView 的部分圓角的設定UIView
- WPF Button按鈕設定圓角
- 為view設定背景圖片View
- Android 載入網路圖片 以及實現圓角圖片效果Android
- Android自定義View之圖片外形特效——輕鬆實現圓角和圓形圖片AndroidView特效
- 如何實現css漸變圓角邊框CSS
- css圓角矩形邊框CSS
- PHP合成圖圓角PHP
- CSS3 設定多個背景圖片CSSS3
- Android自定義設定圓形圖片控制元件Android控制元件
- CSS3圓角表格效果CSSS3
- CSS3圓角詳解CSSS3
- 別用圖片了,CSS遮罩合成實現帶圓角的環形loading動畫CSS遮罩動畫
- 為input文字框設定背景圖片
- CSS把彩色圖片變為灰度圖片CSS
- css設定背景圖片鋪滿固定不動CSS
- Android中圖片圓形設定三種方法介紹Android
- css設定四角邊框CSS