“约见”面试官系列之常见面试题之第八十篇之css常见属性（建议收藏）
CSS3增加的新的屬性和新屬性值很多，其中的重點，比如Flex布局，2D3D效果，關鍵幀動畫等，我們會在其他篇拿出來詳細講解，并附上實例和代碼，供大家參考學習。本文只介紹其他常用且兼容性良好（IE9及以上）的一部分內(nèi)容
水平有限，如有錯漏，希望能在評論區(qū)留言，便于我更正，內(nèi)容不定時更新，轉(zhuǎn)載注明請出處，謝謝。
一、邊框
1.1 border-radius 圓角
1、border-radius的值可以為絕對單位px，和相對單位em，rem，也可以為百分比，值越大，弧度越大。
2、屬性值位數(shù)不同時，表現(xiàn)也不同，具體可以參考圖片。
3、你也可以設置單個角的弧度，比如border-top-right-radius:5px；border-bottom-left-radius:5px。
1.2 box-shadow 陰影
1、box-shadow: X軸偏移值 Y軸偏移值 X軸陰影模糊半徑 Y軸陰影模糊半徑 陰影顏色;
2、其中，X軸和Y軸的偏移值可以為負，但不能共用一個，X軸和Y軸的陰影半徑可以共用一個，但是不能為負。
3、還需要注意的是，陰影模糊半徑是可以不寫的，比如box-shadow：10px 10px #ccc；這樣，仍然會有陰影，但是就失去了這種模糊朦朧的效果，立體感也大大減弱了，一般不會這么使用。
1.3 box-sizing 屬性允許你以特定的方式定義匹配某個區(qū)域的特定元素，這話有點繞口，我們結(jié)合圖來說明。
box-sizing:content-box/border-box/inherit- 1
盒模型基本結(jié)構如圖，當我們設置了寬高，使用了box-sizing屬性，
屬性值為content-box時，寬高的值為content的寬高；
屬性值為border-box時（事實上我們比較常用的就是這個），寬高的值為border+padding+content也就是整個盒模型的寬高；
屬性值為inherit時，則從父元素繼承box-sizing的值。
二、背景
CSS3中，我們對背景有了更強的控制
2.1 background-image
跟以前不同的是，我們通過background-image來為一個元素添加多張圖片，讓我們結(jié)合代碼和效果圖來看一下。
<div class="box"></div>/*右下角的小圖為bg_flower.gif*/- 1
2.2 background-size 調(diào)整背景圖片的大小
屬性值可以為實際單位，也可以是百分比。
.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）可以讓你在兩個或多個指定的顏色之間顯示平穩(wěn)的過渡。以前，你必須使用圖像來實現(xiàn)這些效果。但是，通過使用 CSS3 漸變（gradients），你可以減少下載的事件和寬帶的使用。此外，漸變效果的元素在放大時看起來效果更好，因為漸變（gradient）是由瀏覽器生成的。
其中顏色可以用多種表現(xiàn)形式，包括帶有透明度的rgba()形式
1） 線性漸變
下面讓我們來看代碼
<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); /* 標準的語法 */ } .box2{/* 2、可以設置顏色漸變的方向，比如從左到右 */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、也可以沿著對角的方向漸變 */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點鐘方向為0deg） */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、我們也可以定義多種顏色的漸變，之前的方向的設置方法不變 */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、當然，漸變可以是很多次的 */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)建一個徑向漸變，你也必須至少定義兩種顏色結(jié)點。顏色結(jié)點即你想要呈現(xiàn)平穩(wěn)過渡的顏色。同時，你也可以指定漸變的中心、形狀（原型或橢圓形）、大小。默認情況下，漸變的中心是 center（表示在中心點），漸變的形狀是 ellipse（表示橢圓形），漸變的大小是 farthest-corner（表示到最遠的角落）。
下面上代碼
<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é)點均勻分布（默認情況下 */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); /* 標準的語法 */} .box2{/* 2、當然，對于顏色發(fā)輻射界限，我們也可以進行設置 */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 表示橢圓形。 默認值是 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ù)定義了漸變的大小。它可以是以下四個值：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、當然，也是有重復漸變這種情況*/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軸偏移值，陰影模糊半徑，顏色。在這里，需要注意的是，如果前三個數(shù)值寫兩個，比如text-shadow：5px 5px #ccc；會認為陰影模糊半徑不存在，仍然有文字的重影，但是沒有模糊的視覺效果了。
3.2 word-wrap | word-break 是否允許長單詞換行，這兩個可以一起使用
word-wrap: normal(只允許斷點字換行) | break-word(如果單詞過長，截斷強制換行)
word-break: normal(瀏覽器默認的換行規(guī)則，一般是不允許長單詞內(nèi)部換行) | break-all（允許在單詞內(nèi)換行) | keep-all(只能在半角空格或連字符處換行);
本面試題為前端常考面試題，后續(xù)有機會繼續(xù)完善。我是歌謠，一個沉迷于故事的講述者。
歡迎一起私信交流。
“睡服“面試官系列之各系列目錄匯總（建議學習收藏）?
?
總結(jié)
以上是生活随笔為你收集整理的“约见”面试官系列之常见面试题之第八十篇之css常见属性（建议收藏）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 高中计算机课程事例,【高中信息技术教学案
- 下一篇： 存储器分类和特性