《小白HTML5成長(zhǎng)之路40》怎樣顯示圓角圖片

幾日，隨著小白對(duì)HTML5認(rèn)識(shí)的提升，他自己沒(méi)事瀏覽網(wǎng)頁(yè)的時(shí)候總會(huì)注意一些特殊的展示效果，讓他印象最深刻的一個(gè)效果就是用戶頭像了，一個(gè)矩形的圖片怎么就顯示成圓形了呢？一上午沒(méi)想明白，下午看著老朱沒(méi)什么事，就去向老朱請(qǐng)教：“朱哥！網(wǎng)頁(yè)上的圖片怎么能顯示成圓角呢？特別是正圓形是怎么做出來(lái)的啊？”

老朱隨口說(shuō)道：“border-radius啊！之前我們已經(jīng)用過(guò)幾次了啊！”

小白說(shuō)：“這不是控制容器圓角的么？圖片也可以控制么？”

老朱說(shuō)：“講圖片的時(shí)候我不是告訴過(guò)你了么？肯定是沒(méi)好好聽(tīng)，圖片標(biāo)簽img也是一個(gè)容器，它是一個(gè)放圖片的容器，在img里面顯示什么圖片是靠src屬性來(lái)決定的。既然是容器你不是就可以用border-radius來(lái)控制了么？你試試！”

小白高興的說(shuō)道：“真的成圓角了啊！我要把他變成正圓，是不是圓角設(shè)置成它寬度的一半就可以了？”

老朱說(shuō)：“你先試試吧！試玩就知道了！”

“不行啊！這是怎么回事？”

老朱跟小白說(shuō)：“css的圓角屬性值最多是邊的一半！你的圖片寬比高大，所以圓角值最多位高的一半！你可以先嘗試把圖片的寬高設(shè)置成一樣的看看！”

“果然變成正圓了，可是這樣的話圖片就有變形了，如果小頭像的話還好說(shuō)，大頭像可就不好看了！”

老朱說(shuō)道：“所以現(xiàn)在很多網(wǎng)站頭像上傳的時(shí)候都會(huì)讓用戶截取一個(gè)正方形的圖片生成頭像，就是為了方便進(jìn)行圓角控制！”

小白說(shuō)：“有沒(méi)有折中的方法？假如網(wǎng)站沒(méi)有用戶設(shè)置正方形頭像的功能，還不想讓圖片變形呢？”

老朱說(shuō)：“正圓顯示的肯定是一個(gè)高和寬一樣的區(qū)域，所以圖片被截取肯定是不可避免的了。你可以給圖片外部套一個(gè)div容器，讓這個(gè)div容器的寬度高度一致，并且設(shè)置超出隱藏。這樣設(shè)置一下div的圓角就可以了！你試試看”

小白做好以后說(shuō)道：“我又發(fā)現(xiàn)一個(gè)問(wèn)題，div設(shè)置寬和高一樣以后，圖片如果高比寬小，圖片高度得跟父容器高度一致才能出來(lái)效果！而圖片高比寬大，則需要設(shè)置圖片寬度和父容器寬度一致。我覺(jué)得要把它完善必須使用js來(lái)判斷圖片寬和高的比例進(jìn)行動(dòng)態(tài)設(shè)置。”

“嗯，你可以試試！”

聰明的大家，你們有沒(méi)有什么更好的圖片圓角方式呢？

想學(xué)H5的朋友可以關(guān)注老爐，您的關(guān)注是我持續(xù)更新《小白HTML5成長(zhǎng)之路》的動(dòng)力！

人可能會(huì)疑惑，我為什么專門用一節(jié)內(nèi)容來(lái)說(shuō)邊框和圓角。其實(shí)，不為別的，只為它們?cè)陂_(kāi)發(fā)中，在Web系統(tǒng)中，在手機(jī)頁(yè)面中，太常用了。有邊框的頁(yè)面，讓人耳目一新，一目了然；有圓角的內(nèi)容，讓人賞心悅目，心曠神怡。說(shuō)的有點(diǎn)夸張了，就這么著吧。

邊框(border)一般為長(zhǎng)方形形狀，有上下左右四條邊，CSS邊框?qū)傩栽试S你指定一個(gè)元素邊框的樣式和顏色。CSS的圓角(border-radius)方法，可給任何元素制作 "圓角"效果。

11.1 邊框逼格

在CSS中，你可以通過(guò)border和其延伸的，如border-style，來(lái)實(shí)現(xiàn)邊框的效果。上邊框相關(guān)的有border-top-style樣式、border-top-color顏色、border-top-width寬度和組合了它們的border-top。下、左右邊框類似，換成對(duì)應(yīng)的單詞即可。

邊框樣式(border-style)常用的有dotted(點(diǎn)線)、dashed(虛線)、solid(實(shí)線)、double(雙邊框)這四種，不常用的有g(shù)roove(3D溝槽)、ridge(3D脊邊)、inset(3D嵌入)和outset(3D突出)。

/* --------在樣式表文件中---------- */
/*4條邊框一起設(shè)置*/
.four-border {
    width: 800px;
    border: 2px solid darkgreen;;
}

/*四條邊框可個(gè)性化*/
.four-style {
    width: 800px;
    /* 上、右、下、左*/
    border-width: 1px 2px 3px 4px;
    /*上、右左、下*/
    border-style: solid dashed double;
    /*上下和右左*/
    border-color: darkgreen coral;
}

/*單條邊框設(shè)置*/
.one-style {
    width: 800px;
    border-top: 1px groove orangered;
    border-bottom-width: 5px;
    border-bottom-style: inset;
    border-bottom-color: darkgreen;
}

HTML文件內(nèi)容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>邊框逼格</title>
    <link rel="stylesheet" type="text/css" href="ys2.css"/>
</head>
<body>
<br/><br/>
<div class="four-border">
    border統(tǒng)一設(shè)置四條邊框<br/>
    順序?yàn)椋篵order-width、border-style和border-color.
</div>
<br/><br/>
<div class="four-style">
    四條邊框一起設(shè)置，風(fēng)格可不同<br/>
    順序?yàn)?上、右、下、左。<br/>
    1. 只有一個(gè)值(如：border-width:2px)：表示4條邊框全部一樣；<br/>
    2. 有兩個(gè)值(如：border-width:2px 3px)：表示上下和右左;<br/>
    3. 有三個(gè)值(如：border-width:2px 3px 1px)：表示上、右左、下;<br/>
    4. 有四個(gè)值(如：border-width:2px 3px 1px 5px):表示上、右、下、左。
</div>
<br/><br/>
<div class="one-style">
    單獨(dú)一天邊框進(jìn)行設(shè)置<br/>
    border-top：頂部寬度、樣式、顏色，一起設(shè)置<br/>
    border-top-width:上邊框?qū)挾龋?lt;br/>
    border-top-style:上邊框樣式；<br/>
    border-top-color:上邊框顏色。
    <br/>
</div>
</body>
</html>

輸出結(jié)果

11.2 圓角風(fēng)格

使用CSS的border-radius 屬性，你可以給任何元素制作 "圓角"。 border-radius統(tǒng)一指定4個(gè)圓角，順序?yàn)樽笊稀⒂疑稀⒂蚁潞妥笙隆Ｈ绻囟ㄖ付硞€(gè)角的話，用border-top-left-radius等方式即可。

在樣式表ys2.css文中的內(nèi)容

/*4個(gè)角統(tǒng)一指定*/
.four-radius {
    width: 800px;
    line-height: 40px;
    background: #8AC007;
    border-radius: 15px;
    vertical-align: middle;
    text-align: center;
}

/*單獨(dú)指定一個(gè)角*/
.one-radius {
    width: 800px;
    line-height: 40px;
    background: #8AC007;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 50px;
    vertical-align: middle;
    text-align: center;
}

在HTML文件中的內(nèi)容

<br/><br/>
<div class="four-radius">
    統(tǒng)一設(shè)置4個(gè)圓角<br/>
    一個(gè)值： 四個(gè)圓角值相同;<br/>
    兩個(gè)值: 左上角與右下角，右上角與左下角;<br/>
    三個(gè)值: 左上角, 右上角和左下角，右下角;<br/>
    四個(gè)值: 左上角，右上角，右下角，左下角。
</div>
<br/>
<div class="one-radius">
    單獨(dú)指定某個(gè)角<br/>
    border-top-left-radius：左上角;<br/>
    border-top-right-radius：右上角;<br/>
    border-bottom-right-radius：右下角;<br/>
    border-bottom-left-radius：左下角。
</div>

輸出結(jié)果

11.3 圓角邊框

不要重復(fù)造輪子，所以好多程序員一遇到問(wèn)題，就喜歡搜索，我也是，哈哈哈~。CSS有指定邊框的屬性，也有圓角的屬性，將其放在一起，是不是就可以實(shí)現(xiàn)圓角邊框?答案毋庸置疑，答案是肯定的。

在樣式表ys2.css文件中的內(nèi)容

/*圓角邊框*/
.corners {
    border-radius: 50px;
    border: 3px solid #8AC007;
    padding: 50px;
    width: 720px;
    line-height: 50px;
    vertical-align: middle;
    text-align: center;
}

在HTML文件中的內(nèi)容

<div class="corners">
    邊框?qū)傩院蛨A角屬性，組合成圓角邊框
</div>

輸出結(jié)果

好了，有關(guān)CSS的圓角邊框內(nèi)容，老陳講完了，如果覺(jué)得對(duì)你有所幫助，希望老鐵能轉(zhuǎn)發(fā)點(diǎn)贊，讓更多的人看到這篇文章。你的轉(zhuǎn)發(fā)和點(diǎn)贊，就是對(duì)老陳繼續(xù)創(chuàng)作和分享最大的鼓勵(lì)。

一個(gè)當(dāng)了10年技術(shù)總監(jiān)的老家伙，分享多年的編程經(jīng)驗(yàn)。想學(xué)編程的朋友，可關(guān)注：老陳說(shuō)編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關(guān)注我，沒(méi)錯(cuò)的。

#前端##HTML5##CSS##程序員##Web#

TML 是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言。

HTML 指的是超文本標(biāo)記語(yǔ)言 (Hyper Text Markup Language)
HTML 不是一種編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言 (markup language)
標(biāo)記語(yǔ)言是一套標(biāo)記標(biāo)簽 (markup tag)
HTML 使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)

HTML5 是最新的 HTML 標(biāo)準(zhǔn)。

HTML5 是專門為承載豐富的 web 內(nèi)容而設(shè)計(jì)的，并且無(wú)需額外插件。
HTML5 擁有新的語(yǔ)義、圖形以及多媒體元素。
HTML5 提供的新元素和新的 API 簡(jiǎn)化了 web 應(yīng)用程序的搭建。
HTML5 是跨平臺(tái)的，被設(shè)計(jì)為在不同類型的硬件（PC、平板、手機(jī)、電視機(jī)等等）之上運(yùn)行。

CSS 是一種描述 HTML 文檔樣式的語(yǔ)言。

CSS 描述應(yīng)該如何顯示 HTML 元素。
CSS 用于控制網(wǎng)頁(yè)的樣式和布局。
CSS3 是最新的 CSS 標(biāo)準(zhǔn)。
CSS3 被拆分為"模塊"。主要包括盒子模型、列表模塊、超鏈接方式、語(yǔ)言模塊、背景和邊框、文字特效、多欄布局等模塊。
CSS3的新特征有很多，例如圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實(shí)現(xiàn)透明效果、漸變效果、使用@Font-Face實(shí)現(xiàn)定制字體、多背景圖、文字或圖像的變形處理（旋轉(zhuǎn)、縮放、傾斜、移動(dòng)）、多欄布局、媒體查詢等。

1 標(biāo)注效果

要實(shí)現(xiàn)如下效果：

HTML5:

<ruby>
少<rt>shào</rt>小<rt>xiǎo</rt>離<rt>lí</rt>家<rt>jiā</rt>老<rt>lǎo</rt>大<rt>dà</rt>回<rt>huí</rt>
</ruby>，
<ruby>
鄉(xiāng)<rt>xiāng</rt>音<rt>yīn</rt>無(wú)<rt>wú</rt>改<rt>gǎi</rt>鬢<rt>bìn</rt>毛<rt>máo</rt>衰<rt>cuī</rt>
</ruby>。

2 與文本換行相關(guān)的屬性

	使用說(shuō)明
line-break	用于指定如何（或是否）斷行。除了Firefox，其它瀏覽器都支持。取值包括： auto，使用缺省的斷行規(guī)則分解文本； loose，使用最松散的斷行規(guī)則分解文本，一般用于短行的情況，如報(bào)紙； normal，使用最一般的斷行規(guī)則分解文本； strict，使用最嚴(yán)格的斷行原則分解文本。
word-wrap	允許長(zhǎng)單詞或URL地址換行到下一行。所有瀏覽器都支持。取值包括： normal，只在允許的斷字點(diǎn)換行（瀏覽器保持默認(rèn)處理）； break-word，在長(zhǎng)單詞或 URL 地址內(nèi)部進(jìn)行換行。
word-break	定義文本自動(dòng)換行。Chrome和Safari瀏覽器支持不夠友好。取值包括： normal：為默認(rèn)值，允許在字內(nèi)換行; keep-all,對(duì)于中文、韓文、日文，不允許字?jǐn)嚅_(kāi)； break-all，與normal相同，允許非亞洲語(yǔ)言文本行的任意字內(nèi)斷開(kāi)。
white-space	設(shè)置如何處理元素中的空格。所有瀏覽器都支持。取值包括： normal，默認(rèn)處理方式； pre，顯示預(yù)先格式化的文本，當(dāng)文字超出邊界時(shí)不換行； nowrap，強(qiáng)制在同一行內(nèi)顯示所有文本，合并文本間的多余空白，直到文本結(jié)束或者遭遇br對(duì)象； pre-wrap，顯示預(yù)先格式化的文本，不合并文字間的空白距離，當(dāng)文字碰到邊界時(shí)發(fā)生換行； pre-line，保持文本的換行，不保留文字間的空白距離，當(dāng)文字碰到邊界時(shí)發(fā)生換行。

3 text-shadow

要實(shí)現(xiàn)的效果：

CSS3：

p {
    text-align: center;
    font: bold 60px helvetica, arial, sans-serif;
    color: #fff;
    text-shadow: black 0.1em 0.1em 0.2em;
}

要實(shí)現(xiàn)的效果：

CSS3：

p {
    text-align: center;
    font:bold 60px helvetica, arial, sans-serif;
    color: red;
    text-shadow: 0 0 4px white, 
        0 -5px 4px #ff3, 
        2px -10px 6px #fd3, 
        -2px -15px 11px #f80, 
        2px -25px 18px #f20;
}

要實(shí)現(xiàn)的效果：

CSS3：

p {
    text-align: center;
    padding: 24px;
    margin: 0;
    font-family: helvetica, arial, sans-serif;
    font-size: 80px;
    font-weight: bold;
    color: #D1D1D1;
    background: #CCC;
    text-shadow: -1px -1px white,  
        1px 1px #333;
}

要實(shí)現(xiàn)的效果：

CSS3：

p {
    text-align: center;
    padding: 24px;
    margin: 0;
    font-family: helvetica, arial, sans-serif;
    font-size: 80px;
    font-weight: bold;
    color: #D1D1D1;
    background: #CCC;
    text-shadow: 1px 1px white,  
        -1px -1px #333;
}

4 border的transparent屬性

要實(shí)現(xiàn)的效果：

CSS3：

#demo {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

要實(shí)現(xiàn)的效果：

CSS3：

#demo {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

要實(shí)現(xiàn)的效果：

CSS3：

#demo {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

要實(shí)現(xiàn)的效果：

CSS3：

#demo {
    height: 0;
    width: 120px;
    border-bottom: 120px solid #ec3504;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;

}

5 transform: rotate

要實(shí)現(xiàn)的效果：

CSS3和HTML5：

<style type="text/css">
.bubble {
    width: 200px; /*定義框大小，可忽略，讓消息框自由收縮*/
    height: 50px;
    background:hsla(93,96%,62%,1); /*定義背景色，必須與下面箭頭背景色一致*/
    padding: 12px;  /*增加補(bǔ)白，防止消息文本跑到框外*/
    position: relative; /*定義定位包含框，方便定位箭頭*/
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;   /*圓角*/
}
.bubble:before { 
    content: "";   /*不顯示任何內(nèi)容*/
    width: 0;  /*定義箭頭內(nèi)容區(qū)大小*/
    height: 0;
    position: absolute;  /*絕對(duì)定位*/
    z-index:-1;  /*顯示在消息框下面*/
}
.bubble.bubble-left:before {
    right: 90%;
    top: 50%;
    
    -webkit-transform: rotate(-25deg);
    -moz-transform: rotate(-25deg);
    transform: rotate(-25deg);  /*定位箭頭傾斜角度*/
    /*定義箭頭長(zhǎng)短、粗細(xì)*/
    border-top: 20px  solid transparent;
    border-right: 80px  solid hsla(93,96%,62%,1);
    border-bottom: 20px  solid transparent;

}

div {
    margin:50px;
}

<div class="bubble bubble-left">左側(cè)消息提示框<br>class="bubble bubble-left"</div>

6 background: repeating-linear-gradient

要實(shí)現(xiàn)的效果：

CSS3：

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    background: -webkit-repeating-linear-gradient(to top, #f9f9f9, #f9f9f9 29px, #ccc 30px);
    background: repeating-linear-gradient( to top, #f9f9f9, #f9f9f9 29px, #ccc 30px );
    background-size: 100% 30px;
    position: relative;
}
body:before {
    content: "";
    display: inline-block;
    height: 100%;
    width: 4px;
    border-left: 4px double #FCA1A1;
    position: absolute;
    left: 30px;
}

需要實(shí)現(xiàn)的效果：

CSS3：

.box {
    background: linear-gradient(-135deg, #f00 30px, #fff 30px, #162e48 32px);
    color: #fff;
    padding: 12px 24px;
}

7 實(shí)現(xiàn)選項(xiàng)卡效果

<script>
function setTab(cursel,n){
	    for(i=1;i<=n;i++){
	        	var menu=document.getElementById("tab_"+i);
	        	var con=document.getElementById("con_"+i);
	        	menu.className=i==cursel?"hover":"";
	        	con.style.display=i==cursel?"block":"none";
	    }
}
</script>

<div id="tab">
    <div class="Menubox">
        <ul>
            <li id="tab_1" class="hover" onclick="setTab(1,4)">明星</li>
            <li id="tab_2" onclick="setTab(2,4)">搞笑</li>
            <li id="tab_3" onclick="setTab(3,4)">美女</li>
            <li id="tab_4" onclick="setTab(4,4)">攝影</li>
        </ul>
    </div>
    <div class="Contentbox">
        <div id="con_1" class="hover" ><img src="images/1.png" /></div>
        <div id="con_2" class="hide"><img src="images/2.png" /></div>
        <div id="con_3" class="hide"><img src="images/3.png" /></div>
        <div id="con_4" class="hide"><img src="images/4.png" /></div>
    </div>
</div>
</body>

8 表格隔行添加背景色

CSS3：

tbody tr:nth-child(2n) {
    background-color: #f5fafe;
}

9 border-radius

圓角表格的CSS3：

.bordered tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}

10 border-spacing

單線表格的CSS3：

table {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;
    width: 100%;
}

11 box-shadow

設(shè)計(jì)圖片翹邊陰影效果：

CSS3：

.box {
    width: 980px;
    clear: both;
    overflow: hidden;
    height: auto;
    margin: 20px auto;
}
.box li {
    background: #fff;
    float: left;
    position: relative;
    margin: 20px 10px;
    border: 2px solid #efefef;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
    -o-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
    box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
}
.box li img {
    width: 290px;
    height: 200px;
    margin: 5px;
}
.box li:before {
    content: "";
    position: absolute;
    width: 90%;
    height: 80%;
    bottom: 13px;
    left: 21px;
    background: transparent;  /*透明背景*/
    z-index: -2;   /*顯示在照片的下面*/
    box-shadow: 0 8px 20px rgba(0,0,0,0.8);  /*添加陰影*/
    -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    -o-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    transform: skew(-12deg) rotate(-6deg);   /*變形并旋轉(zhuǎn)陰影，讓其翹起*/
    -webkit-transform: skew(-12deg) rotate(-6deg);
    -moz-transform: skew(-12deg) rotate(-6deg);
    -os-transform: skew(-12deg) rotate(-6deg);
    -o-transform: skew(-12deg) rotate(-6deg);
}
.box li:after { /*在左側(cè)添加翹邊陰影*/
    content: "";
    position: absolute;
    width: 90%;
    height: 80%;
    bottom: 13px;
    right: 21px;
    z-index: -2;
    background: transparent;
    box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    transform: skew(12deg) rotate(6deg);
    -webkit-transform: skew(12deg) rotate(6deg);
    -moz-transform: skew(12deg) rotate(6deg);
    -os-transform: skew(12deg) rotate(6deg);
    -o-transform: skew(12deg) rotate(6deg);
}

<ul class="box">
    <li><img src="images/1.jpg" /></li>
    <li><img src="images/2.jpg" /></li>
    <li><img src="images/3.jpg" /></li>
</ul>

ref

《HTML5+CSS3+JavaScript從入門到精通（實(shí)例版）》

-End-

在線咨詢

上一篇：JavaScript 事件和方法提交那些事兒
下一篇：20個(gè)神級(jí)插件合集，好用到讓Edge瀏覽器起飛

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

《小白HTML5成長(zhǎng)之路40》怎樣顯示圓角圖片

11.1 邊框逼格

11.2 圓角風(fēng)格

11.3 圓角邊框

1 標(biāo)注效果

2 與文本換行相關(guān)的屬性

3 text-shadow

4 border的transparent屬性

5 transform: rotate

6 background: repeating-linear-gradient

7 實(shí)現(xiàn)選項(xiàng)卡效果

8 表格隔行添加背景色

9 border-radius

10 border-spacing

11 box-shadow

您的項(xiàng)目需求