“约见”面试官系列之常见面试题之第八十篇之css常见属性（建议收藏）
CSS3增加的新的屬性和新屬性值很多，其中的重點(diǎn)，比如Flex布局，2D3D效果，關(guān)鍵幀動(dòng)畫等，我們會(huì)在其他篇拿出來(lái)詳細(xì)講解，并附上實(shí)例和代碼，供大家參考學(xué)習(xí)。本文只介紹其他常用且兼容性良好（IE9及以上）的一部分內(nèi)容
水平有限，如有錯(cuò)漏，希望能在評(píng)論區(qū)留言，便于我更正，內(nèi)容不定時(shí)更新，轉(zhuǎn)載注明請(qǐng)出處，謝謝。
一、邊框
1.1 border-radius 圓角
1、border-radius的值可以為絕對(duì)單位px，和相對(duì)單位em，rem，也可以為百分比，值越大，弧度越大。
2、屬性值位數(shù)不同時(shí)，表現(xiàn)也不同，具體可以參考圖片。
3、你也可以設(shè)置單個(gè)角的弧度，比如border-top-right-radius:5px；border-bottom-left-radius:5px。
1.2 box-shadow 陰影
1、box-shadow: X軸偏移值 Y軸偏移值 X軸陰影模糊半徑 Y軸陰影模糊半徑 陰影顏色;
2、其中，X軸和Y軸的偏移值可以為負(fù)，但不能共用一個(gè)，X軸和Y軸的陰影半徑可以共用一個(gè)，但是不能為負(fù)。
3、還需要注意的是，陰影模糊半徑是可以不寫的，比如box-shadow：10px 10px #ccc；這樣，仍然會(huì)有陰影，但是就失去了這種模糊朦朧的效果，立體感也大大減弱了，一般不會(huì)這么使用。
1.3 box-sizing 屬性允許你以特定的方式定義匹配某個(gè)區(qū)域的特定元素，這話有點(diǎn)繞口，我們結(jié)合圖來(lái)說(shuō)明。
box-sizing:content-box/border-box/inherit- 1
盒模型基本結(jié)構(gòu)如圖，當(dāng)我們?cè)O(shè)置了寬高，使用了box-sizing屬性，
屬性值為content-box時(shí)，寬高的值為content的寬高；
屬性值為border-box時(shí)（事實(shí)上我們比較常用的就是這個(gè)），寬高的值為border+padding+content也就是整個(gè)盒模型的寬高；
屬性值為inherit時(shí)，則從父元素繼承box-sizing的值。
二、背景
CSS3中，我們對(duì)背景有了更強(qiáng)的控制
2.1 background-image
跟以前不同的是，我們通過(guò)background-image來(lái)為一個(gè)元素添加多張圖片，讓我們結(jié)合代碼和效果圖來(lái)看一下。
<div class="box"></div>/*右下角的小圖為bg_flower.gif*/- 1
2.2 background-size 調(diào)整背景圖片的大小
屬性值可以為實(shí)際單位，也可以是百分比。
.box{background-size:60px 100px;/*寬，高*/background-size:60% 100%; }2.3 background-origin 規(guī)定背景圖片的定位區(qū)域
background-origin: content-box / padding-box / border-box ;
下圖中，綠色的是邊框，黃色的是padding+content區(qū)域。
- 1
- 2
- 3
2.4 background-clip 規(guī)定背景的繪制區(qū)域
background-clip: content-box / padding-box / border-box ;
<div class="box1">啦啦啦啦，德瑪西亞。啦啦啦啦，劍圣偷塔。啦啦啦啦，我要回家。啦啦啦啦，下雨不怕。啊啊！</div> <div class="box2">啦啦啦啦，德瑪西亞。啦啦啦啦，劍圣偷塔。啦啦啦啦，我要回家。啦啦啦啦，下雨不怕。啊啊！</div> <div class="box3">啦啦啦啦，德瑪西亞。啦啦啦啦，劍圣偷塔。啦啦啦啦，我要回家。啦啦啦啦，下雨不怕。啊啊！</div> div{float:left;margin:30px;width: 120px;height: 150px;background: yellow;border: 20px solid rgba(0, 0, 0, 0.1);padding: 20px; } .box1{background-clip:content-box; } .box2{background-clip:padding-box; } .box3{background-clip:border-box; }2.5 linear-gradient 背景的顏色漸變（IE10）
CSS3 漸變（gradients）可以讓你在兩個(gè)或多個(gè)指定的顏色之間顯示平穩(wěn)的過(guò)渡。以前，你必須使用圖像來(lái)實(shí)現(xiàn)這些效果。但是，通過(guò)使用 CSS3 漸變（gradients），你可以減少下載的事件和寬帶的使用。此外，漸變效果的元素在放大時(shí)看起來(lái)效果更好，因?yàn)闈u變（gradient）是由瀏覽器生成的。
其中顏色可以用多種表現(xiàn)形式，包括帶有透明度的rgba()形式
1） 線性漸變
下面讓我們來(lái)看代碼
<div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> <div class="box6"></div> div{float:left;margin:30px;width: 100px;height: 150px;border: 2px solid orange;font-size: 14px;line-height: 1.5; } .box1{/* 1、屬性值最少為兩種顏色 */background: -webkit-linear-gradient(red, yellow); /* Safari 5.1 - 6.0 */background: -o-linear-gradient(red, yellow); /* Opera 11.1 - 12.0 */background: -moz-linear-gradient(red, yellow); /* Firefox 3.6 - 15 */background: linear-gradient(red, yellow); /* 標(biāo)準(zhǔn)的語(yǔ)法 */ } .box2{/* 2、可以設(shè)置顏色漸變的方向，比如從左到右 */background: -webkit-linear-gradient(left, green , yellow); background: -o-linear-gradient(left, green, yellow); background: -moz-linear-gradient(left, green, yellow); background: linear-gradient(left, green , yellow); } .box3{/* 3、也可以沿著對(duì)角的方向漸變 */background: -webkit-linear-gradient(top left, blue , yellow); background: -o-linear-gradient(top left, blue, yellow); background: -moz-linear-gradient(top left, blue, yellow); background: linear-gradient(top left, blue , yellow); } .box4{/* 4、或者，我們直接用角度確定漸變的方向（12點(diǎn)鐘方向?yàn)?deg） */background: -webkit-linear-gradient(60deg, rgb(248, 182, 44), rgb(0, 159, 233)); background: -o-linear-gradient(60deg, rgb(248, 182, 44), rgb(0, 159, 233)); background: -moz-linear-gradient(60deg, rgb(248, 182, 44), rgb(0, 159, 233)); background: linear-gradient(60deg, rgb(248, 182, 44), rgb(0, 159, 233)); } .box5{/* 5、我們也可以定義多種顏色的漸變，之前的方向的設(shè)置方法不變 */background: -webkit-linear-gradient(45deg,red,orange,yellow,green,blue,indigo,violet);background: -o-linear-gradient(45deg,red,orange,yellow,green,blue,indigo,violet);background: -moz-linear-gradient(45deg,red,orange,yellow,green,blue,indigo,violet);background: linear-gradient(45deg, red,orange,yellow,green,blue,indigo,violet); } .box6{/* 6、當(dāng)然，漸變可以是很多次的 */background: -webkit-repeating-linear-gradient(red, red 10%, yellow 20%); background: -o-repeating-linear-gradient(red, red 10%, yellow 20%);background: -moz-repeating-linear-gradient(red, red 10%, yellow 20%); background: repeating-linear-gradient(red, red 10%, yellow 20%); }2）、徑向漸變
創(chuàng)建一個(gè)徑向漸變，你也必須至少定義兩種顏色結(jié)點(diǎn)。顏色結(jié)點(diǎn)即你想要呈現(xiàn)平穩(wěn)過(guò)渡的顏色。同時(shí)，你也可以指定漸變的中心、形狀（原型或橢圓形）、大小。默認(rèn)情況下，漸變的中心是 center（表示在中心點(diǎn)），漸變的形狀是 ellipse（表示橢圓形），漸變的大小是 farthest-corner（表示到最遠(yuǎn)的角落）。
下面上代碼
<div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> div{float:left;margin:30px;width: 150px;height: 150px;border: 2px solid orange;font-size: 14px;line-height: 1.5; } .box1{/* 1、顏色結(jié)點(diǎn)均勻分布（默認(rèn)情況下 */background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 - 6.0 */background: -o-radial-gradient(red, yellow, green); /* Opera 11.6 - 12.0 */background: -moz-radial-gradient(red, yellow, green); /* Firefox 3.6 - 15 */background: radial-gradient(red, yellow, green); /* 標(biāo)準(zhǔn)的語(yǔ)法 */} .box2{/* 2、當(dāng)然，對(duì)于顏色發(fā)輻射界限，我們也可以進(jìn)行設(shè)置 */background: -webkit-radial-gradient(red 5%, yellow 15%, green 60%); background: -o-radial-gradient(red 5%, yellow 15%, green 60%); background: -moz-radial-gradient(red 5%, yellow 15%, green 60%); background: radial-gradient(red 5%, yellow 15%, green 60%); } .box3{/* 3、shape 參數(shù)定義了形狀。它可以是值 circle 或 ellipse。其中，circle 表示圓形，ellipse 表示橢圓形。 默認(rèn)值是 ellipse。*/background: -webkit-radial-gradient(circle, red, yellow, green); background: -o-radial-gradient(circle, red, yellow, green); background: -moz-radial-gradient(circle, red, yellow, green); background: radial-gradient(circle, red, yellow, green); } .box4{/* 4、size 參數(shù)定義了漸變的大小。它可以是以下四個(gè)值：closest-side farthest-side closest-corner farthest-corner，具體的不同大家可以自己嘗試，這里只展示一種情況 */background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black); } .box5{/* 5、當(dāng)然，也是有重復(fù)漸變這種情況*/background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);background: repeating-radial-gradient(red, yellow 10%, green 15%); }三、文本
3.1 text-shadow 文本陰影
規(guī)則跟box-shadow類似，text-shadow：X軸偏移值，Y軸偏移值，陰影模糊半徑，顏色。在這里，需要注意的是，如果前三個(gè)數(shù)值寫兩個(gè)，比如text-shadow：5px 5px #ccc；會(huì)認(rèn)為陰影模糊半徑不存在，仍然有文字的重影，但是沒有模糊的視覺效果了。
3.2 word-wrap | word-break 是否允許長(zhǎng)單詞換行，這兩個(gè)可以一起使用
word-wrap: normal(只允許斷點(diǎn)字換行) | break-word(如果單詞過(guò)長(zhǎng)，截?cái)鄰?qiáng)制換行)
word-break: normal(瀏覽器默認(rèn)的換行規(guī)則，一般是不允許長(zhǎng)單詞內(nèi)部換行) | break-all（允許在單詞內(nèi)換行) | keep-all(只能在半角空格或連字符處換行);
本面試題為前端常考面試題，后續(xù)有機(jī)會(huì)繼續(xù)完善。我是歌謠，一個(gè)沉迷于故事的講述者。
歡迎一起私信交流。
“睡服“面試官系列之各系列目錄匯總（建議學(xué)習(xí)收藏）?
?
總結(jié)
以上是生活随笔為你收集整理的“约见”面试官系列之常见面试题之第八十篇之css常见属性（建议收藏）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 高中计算机课程事例,【高中信息技术教学案
- 下一篇： 使用BackTrack4破解Window