CSS3體驗入門

CSS3在樣式上提供了非常豐富的選擇，目前由于浏覽器的問題，部分新的樣式需要加載字首才可以讓不同的浏覽器識别

Firefox：-moz-

Chrome：-webkit-

Opera：-o- 這個這個太萌了

Safari：-webkit-

IE：-ms-

Border

先說下新的邊框樣式，新的邊框樣式提供了可定制的圓角，陰影和圖檔邊框的控制。先看一個簡單的案例

div

{

width: 100px;

height: 100px;

border-style: solid;

border-width: 15px 2px 5px 3px;

border-top-left-radius: 10px 20px;

border-top-right-radius: 15px;

border-bottom-right-radius: 20px 10px;

border-bottom-left-radius: 30px 15px;

}

上面的代碼描述了一個圓弧角的矩形，并且有陰影。圓弧角的值是x/y，x是水準半徑，y是垂直半徑，如果y不設定，那y=x。radius可以簡寫到一起

border-radius: 10px 15px 20px 30px / 20px 15px 10px 15px;

來看下陰影

box-shadow: -3px 3px 2px 2px rgb(10,20,30);

值的格式分别為：投影方式 X軸偏移量 Y軸偏移量陰影模糊半徑陰影擴充半徑陰影顔色

xy值為正值，則陰影在對象的右邊，反之其值為負值時，陰影在對象的左邊

投影方式預設是外陰影，如果要設定，必定是inset

border: 12px solid blue;

background-color: Orange;

border-top-left-radius: 60px 90px;

border-bottom-right-radius: 60px 90px;

box-shadow: 64px 64px 24px 40px rgb(0,0,4), 12px 12px 0px 18px rgb(0,0,4), inset;

然後是邊框圖檔，這個有點不直覺

-webkit-border-image: url(http://www.witshare.org/css/images/mm_light.png) 15 3 5 3 stretch;

-moz-border-image: url(http://www.witshare.org/css/images/mm_light.png) 15 3 5 3 stretch;

上面的代碼就是說，把圖檔按上右下左的次序（15px 3px 5px 3px 但不要寫機關，預設就是px）切成9塊，四個尖角切出的不動，其他都按寬高拉伸變形。

變形的參數有stretch/round/repeat/space，可以設定x y，也可以設x，那x=y了。

Backgrounds

css2對北京圖檔的處理是放置一個，平鋪，x和y方向，現在我們可以選擇新的背景圖檔大小的方式

width: 530px;

height: 330px;

background-image: url(http://www.witshare.org/css/images/mm_light.png);

background-size:cover;

background-repeat:no-repeat;

使用size可以讓圖檔适應元素的大小：cover：此值是将圖檔放大，以适合鋪滿整個容器，這個主要運用在，當圖檔小于容器時，又無法使用background-repeat來實作時，我們就可以采用cover;将背景圖檔放大到适合容器的大小，

contain:此值剛好與cover相反，其主要是将背景圖檔縮小，以适合鋪滿整個容器，這個主要運用在，當背景圖檔大于元素容器時，而又需要将背景圖檔全部顯示出來，此時我們就可以使用contain将圖檔縮小到适合容器大小為止，這兩種方法都會使用圖檔失真。

還可以定位背景的位置區域

padding: 20px;

border: solid 30px red;

background-color: Lime;

background-repeat: no-repeat;

-moz-background-origin: padding;

-webkit-background-origin: padding;

-moz-background-origin: padding-box;

-webkit-background-origin: padding-box;

-o-background-origin: padding-box;

background-origin: padding-box;

以上的特性可以多個圖檔來源重疊，下面的案例描述了如何把三張牌疊放到一起的（為什麼我每次都用牌來做案例呢？）

width: 300px;

height: 300px;

background-image: url(img/club/10.png), url(img/diamond/9.png),url(img/spade/8.png);

background-position: 0px 0px,3px 20px,6px 40px;

background-origin: content-box;

Text

看看下demo

span

text-shadow: 5px 5px 5px #FF0000;

word-wrap: break-word;

text-overflow: ellipsis;

陰影的參數是 x軸 y軸模糊度顔色

換行就是一個：在邊界内換行

文本溢出的話有兩個值 clip：不顯示省略标記（...），而是簡單的裁切。ellipsis：當對象内文本溢出時顯示省略标記（...）

Font

以前我們盡量用标準字型，應為考慮到用戶端沒有安裝我們設計用的字型，現在css3開始支援線上字型了

以下應用了google的一個很漂亮的字型

<style>

span

{

font-family: 'Tangerine' , serif;

font-size: 48px;

}

</style>

Transforms

汽車人，變形出發。css3開始支援2D的變形啦

下面的代碼描述了如何順時針旋轉

transform: rotate(15deg);

-ms-transform: rotate(15deg);

-webkit-transform: rotate(15deg);

-o-transform: rotate(15deg);

-moz-transform: rotate(15deg);

下面是沿xy軸移動，可以通過translateX/y來個體設定

transform: translate(10px,100px);

-ms-transform: translate(10px,100px);

-webkit-transform: translate(50px,100px);

-o-transform: translate(10px,100px);

-moz-transform: translate(10px,100px);

縮放，縮放的值是倍數，以下代碼得到200*100的矩形，同樣可以通過scalex/y來各自細化值

transform: scale(2,1);

-ms-transform: scale(2,1);

-webkit-transform: scale(2,1);

-o-transform: scale(2,1);

-moz-transform: scale(2,1);

扭曲通過描述xy上的角度來變形，同樣可以xy細化

transform: skew(10deg,20deg);

-ms-transform: skew(10deg,20deg);

-webkit-transform: skew(10deg,20deg);

-o-transform: skew(10deg,20deg);

-moz-transform: skew(10deg,20deg);

矩陣變形，通過6個值完全重新定位元素

transform: matrix(0.866,0.5,-0.5,0.866,0,0);

-ms-transform: matrix(0.866,0.5,-0.5,0.866,0,0);

-moz-transform: matrix(0.866,0.5,-0.5,0.866,0,0);

-webkit-transform: matrix(0.866,0.5,-0.5,0.866,0,0);

-o-transform: matrix(0.866,0.5,-0.5,0.866,0,0);

換變形中心點

transform: rotate(45deg);

transform-origin: 20% 40%;

-ms-transform: rotate(45deg);

-ms-transform-origin: 20% 40%;

-webkit-transform: rotate(45deg);

-webkit-transform-origin: 20% 40%;

-moz-transform: rotate(45deg);

-moz-transform-origin: 20% 40%;

-o-transform: rotate(45deg);

-o-transform-origin: 20% 40%;

也可以對一個變形動作給出時間和事件控制。

transition主要包含四個屬性值：執行變換的屬性：transition-property,變換延續的時間：transition-duration,在延續時間段，變換的速率變化transition-timing-function,變換延遲時間transition-delay。

值的變換速率有6個可能值

ease逐漸變慢 0.25, 0.1, 0.25, 1.0

linear 勻速 0.0, 0.0, 1.0, 1.0

ease-in 加速 0.42, 0, 1.0, 1.0

ease-out 減速 0, 0, 0.58, 1.0

ease-in-out 加速然後減速 0.42, 0, 0.58, 1.0

cubic-bezier

transition-delay是用來指定一個動畫開始執行的時間,意思是當改變元素屬性值後多長時間開始執行transition效果

下面是一個簡單的案例

transition: width 2s, height 2s;

-moz-transition: width 2s, height 2s, -moz-transform 2s;

-webkit-transition: width 2s, height 2s, -webkit-transform 2s;

-o-transition: width 2s, height 2s, -o-transform 2s;

}

div:hover

width: 200px;

height: 200px;

background-color:Blue;

transform: rotate(360deg);

-moz-transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-o-transform: rotate(360deg);

以下的代碼描述了不同的加速情況

<!DOCTYPE html>

<head>

<style>

box

{

border: 1px solid #ccc;

padding: 10px;

height: 400px;

width: 400px;

}

.transition-demo

width: 100px;

height: 100px;

border: 12px solid blue;

background-color: Orange;

border-top-left-radius: 60px 90px;

border-bottom-right-radius: 60px 90px;

box-shadow: 64px 64px 24px 40px rgb(0,0,4), 12px 12px 0px 18px rgb(0,0,4), inset;

text-align: center;

line-height: 50px;

color: #fff;

margin-bottom: 10px;

#ease

-moz-transition: all 5s ease 0.3s;

-webkit-transition: all 5s ease 0.3s;

-o-transition: all 5s ease 0.3s;

transition: all 5s ease 0.3s;

background: #f36;

#ease-in

-moz-transition: all 3s ease-in 0.5s;

-webkit-transition: all 3s ease-in 0.5s;

-o-transition: all 3s ease-in 0.5s;

transition: all 3s ease-in 0.5s;

background: #369;

#ease-out

-moz-transition: all 5s ease-out 0s;

-webkit-transition: all 5s ease-out 0s;

-o-transition: all 5s ease-out 0s;

transition: all 5s ease-out 0s;

background: #636;

#ease-in-out

-moz-transition: all 1s ease-in-out 2s;

-webkit-transition: all 1s ease-in-out 2s;

-o-transition: all 1s ease-in-out 2s;

transition: all 1s ease-in-out 2s;

background: #3e6;

#linear

-moz-transition: all 6s linear 0s;

-webkit-transition: all 6s linear 0s;

-o-transition: all 6s linear 0s;

transition: all 6s linear 0s;

background: #999;

#cubic-bezier

-moz-transition: all 4s cubic-bezier 1s;

-webkit-transition: all 4s cubic-bezier 1s;

-o-transition: all 4s cubic-bezier 1s;

transition: all 4s cubic-bezier 1s;

background: #6d6;

#box.timings-demo-hover .transition-demo, #box:hover .transition-demo

-moz-transform: rotate(360deg) scale(1.2);

-webkit-transform: rotate(360deg) scale(1.2);

-o-transform: rotate(360deg) scale(1.2);

transform: rotate(360deg) scale(1.2);

border: 1px solid rgba(255,230,255,08);

-moz-border-radius: 25px;

-webkit-border-radius: 25px;

border-radius: 25px;

margin-left: 280px;

height: 30px;

line-height: 30px;

margin-bottom: 15px;

</style>

</head>

<body>

勻速</div>

逐漸變慢</div>

加速</div>

減速</div>

加速然後減速</div>

自定義</div>

</div>

</body>

</html>

當然css3也提供了真正的動畫處理方式Animation，Animation和其他很多動畫技術一樣，采用的是關鍵幀Keyframes，但控制比較多，下次我獨立寫一個關于css動畫的吧。

Columns

我們有讨論過說，web頁面就是文檔，文檔上的元素布局是非常重要的，往往我們需要對文字進行豎排布局，現在css3開始支援了。不過IE9不支援。

css的columns支援多列，列邊距，列邊框和誇列，下面的代碼描述了這些實作

article

-moz-column-count: 5;

-webkit-column-count: 5;

column-count: 5;

-moz-column-width: auto;

-webkit-column-width: auto;

column-width: auto;

-webkit-column-gap: 5px;

-moz-column-gap: 5px;

column-gap: 5px;

-webkit-column-gap: 20px;

-moz-column-gap: 20px;

column-gap: 20px;

-moz-column-rule: 5px solid red;

-webkit-column-rule: 5px solid red;

column-rule: 5px solid red;

background: orange;

border-bottom: 3px double;

margin: 5px 0;

-webkit-column-span: all;

-moz-column-span: all;

column-span: all;

<h1>

計算機專業不好嗎？</h1>

<p>

計算機專業曾經是考大學最熱門的專業之一——你想啊，現在我們已經進入資訊社會，

計算機技術已經滲透到我們工作和生活的各個角落，而且，人類社會的發展也要建立在計算機技術大發展的基礎之上，

這個專業當然應該是很有前景的！然而，由于前幾年計算機和軟體相關專業的招生量急劇膨脹，

高校的師資和其他相關資源的瓶頸制約了對計算機人才的培養。就我們的調查來看，

很多高校老師都沒有真正的企業實踐經驗，是以往往把一些專業課和基礎課上得很“枯燥”，

理論闡述太多、實踐動手很少、課程門類開得太多、技術之間的聯系講得太少，學生的學習興趣提不起來。

是以，企業對于大學畢業生也不太“感冒”，認為大學生眼高手低、知識和技能滞後、什麼都不會做！

其實，很多計算機專業的學生都有和你一樣的痛苦，你不是一個人在苦惱！我們認為，不是專業出了問題，

而是專業人才的教育和訓練出了問題。最近幾年，中國企業對軟體人才的需求量每年都在以30%以上的速度增長，

很多企業求才若渴：軟體業的大學生，入職薪資就要比平均薪資高20%，

而且一般過三～五年，月薪就能實作翻兩番達到萬元以上！

除了計算機，還有哪個行業的薪資增長有這樣的速度？

</p>

</article>

本文轉自shyleoking 51CTO部落格，原文連結:http://blog.51cto.com/shyleoking/806937

CSS3體驗入門

繼續閱讀

Docker：安裝Docker Compose

Nginx：Docker Compose部署Nginx

flow.ci - 簡單強大的開源 CI/CD 工具，Jenkins 之外的另一種選擇！flow.ci - 開源 CI/CD 工具

圖檔下載下傳圖檔放大

docker-compose 檔案結構和示例（大全）

mockjs 的正确使用姿勢mockjs fetch的使用思路

css display={block,inline,inline-block}的認識

前端開發日記之window.onload

使用jvm監控工具(jconsole、jvisualvm)通過jmx遠端連接配接kubernetes上的java應用

Docker - Docker Volume及Volume指令詳解

webstorm中配置git

Vue圖檔切換過渡設計

測試工程師面試解析～

2018年不想被web前端開發淘汰，你需要掌握哪些技術？

Docker-compose 進行Doris自動化編排部署

服裝資訊化數字化變革