css3乾貨

時間 2019-12-14

標籤 css3 css 乾貨欄目 CSS 简体版

原文原文鏈接

CSS3是CSS2的升級版本，3只是版本號，它在CSS2.1的基礎上增長了不少強大的新功能。目前主流瀏覽器chrome、safari、firefox、opera、甚至360都已經支持了CSS3大部分功能了，IE10之後也開始全面支持CSS3了。在編寫CSS3樣式時，不一樣的瀏覽器可能須要不一樣的前綴。它表示該CSS屬性或規則還沒有成爲W3C標準的一部分，是瀏覽器的私有屬性，雖然目前較新版本的瀏覽器都是不須要前綴的，但爲了更好的向前兼容前綴仍是少不了的。css

前綴html	瀏覽器css3
-webkitweb	chrome和safarichrome
-moz瀏覽器	firefox字體
-ms動畫	IEui
-ourl	opera

CSS3給咱們帶來了什麼好處呢？簡單的說，CSS3把不少之前須要使用圖片和腳原本實現的效果、甚至動畫效果，只須要短短几行代碼就能搞定。好比圓角，圖片邊框，文字陰影和盒陰影，過渡、動畫等。

1、圓角（border-radius）是向元素添加圓角邊框。

border-radius: 5px 4px 3px 2px; /* 四個半徑值分別是左上角、右上角、右下角和左下角，順時針 */

2、陰影（box-shadow）

　　box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式];

　　注意：inset 能夠寫在參數的第一個或最後一個，其它位置是無效的。

　　.box_shadow
　　　　{ 　　

box-shadow:4px 2px 6px #333333 inset; 　　

}

　　添加多個陰影：

　　以上的語法的介紹，就這麼簡單，若是添加多個陰影，只需用逗號隔開便可。如：

　　.box_shadow{ box-shadow:3px 2px 5px #f00, -3px -2px 5px #000, 0px 0px 12px 5px #33CC00 inset; }

3、邊框應用圖片（ border-image）

　　border-image的語法：

代碼：

　　#border_image {
　　　　margin:0 auto;
　　　　height:100px;
　　　　line-height:100px;
　　　　text-align:center;
　　　　font-size:30px;
　　　　width:450px;
　　　　border:15px solid #ccc;
　　　　border-image:url(images/1.jpg) 70 repeat;
　　}
　　<div id="border_image">
　　　　請爲我鑲嵌上漂亮的畫框吧
　　</div>

4、顏色

background-color:rgba(100,120,60,0.5);

5、漸變色彩

CSS3 Gradient 分爲線性漸變(linear)和徑向漸變(radial)。

　　參數：

　　用法：

6、文字與字體

　　text-overflow用來設置是否使用一個省略標記（...）標示對象內文本的溢出。

7、文本陰影text-shadow

8、一、（background-origin）設置元素背景圖片的原始起始位置。

background-origin ： border-box | padding-box | content-box;

二、background-clip 用來將背景圖片作適當的裁剪以適應實際須要。

　　　 background-clip ： border-box | padding-box | content-box | no-clip

　　三、background-size 設置背景圖片的大小，以長度值或百分比顯示，還能夠經過cover和contain來對圖片進行伸縮。

　　　　background-size: auto | <長度值> | <百分比> | cover | contain

　　　　取值說明：

　　　　一、auto：默認值，不改變背景圖片的原始高度和寬度；

　　　　二、<長度值>：成對出現如200px 50px，將背景圖片寬高依次設置爲前面兩個值，當設置一個值時，將其做爲圖片寬度值來等比縮放；

　　　　三、<百分比>：0％~100％之間的任何值，將背景圖片寬高依次設置爲所在元素寬高乘之前面百分比得出的數值，當設置一個值時同上；

　　　　四、cover：顧名思義爲覆蓋，即將背景圖片等比縮放以填滿整個容器；

　　　　五、contain：容納，即將背景圖片等比縮放至某一邊緊貼容器邊緣爲止。

　　四、multiple backgrounds　　　　

　　　　.demo{
　　　　　　width: 300px;
　　　　　　height: 140px;
　　　　　　border: 1px solid #999;

　　　　　　background-image: url(http://img.mukewang.com/54cf2365000140e600740095.jpg),
　　　　　　url(http://img.mukewang.com/54cf238a0001728d00740095.jpg),
　　　　　　url(http://img.mukewang.com/54cf23b60001fd9700740096.jpg);
　　　　　　background-position: left top, 120px 0, 230px 0;
　　　　　　background-repeat: no-repeat, no-repeat, no-repeat;

　　　　　　margin:0 0 20px 0;
　　　　}

　　　　.task {
　　　　　　width: 300px;
　　　　　　height: 140px;
　　　　　　border: 1px solid #999;

　　　　　　background:url(http://static.mukewang.com/static/img/logo_index.png) no-repeat left top/80% 40%,
　　　　　　url(http://static.mukewang.com/static/img/logo_index.png) no-repeat right bottom/50% 50%;
　　　　}

　　9、 css3屬性選擇器

　　　　1.屬性選擇器

　　　　　　a[class^=column]{

　　　　　　background: red;
　　　　　　color:#fff;
　　　　　　}
　　　　　　a[href$=doc]{
　　　　　　background: green;;
　　　　　　color:#fff;
　　　　　　}
　　　　　　a[title*=box]{
　　　　　　background: blue;
　　　　　　color: #fff;
　　　　　　}
　　　　</style>

　　　　2.結構性僞類選擇器—root()

　　　　　　「:root」選擇器等同於<html>元素，簡單點說：

　　　　　　:root{background:orange}

　　　　　　html {background:orange;}

　　　　　　獲得的效果等同。

　　　　　　建議使用:root方法。

　　　　3.結構性僞類選擇器—not

　　　　　　給表單中除submit按鈕以外的input元素添加紅色邊框，CSS代碼能夠寫成：

　　　　　　form { width: 200px; margin: 20px auto; }

　　　　　　div { margin-bottom: 20px; }

　　　　　　input:not([type="submit"]){ border:1px solid red; }