Python全棧開發學習--HTML--CSS3（上）--Day6

CSS3概述

CSS3是原CSS技術的升級版本，新增了一些屬性。對CSS3已完全向後兼容，所以不必改變現有的設計。瀏覽器將永遠支持CSS2。在開發過程中應該考慮瀏覽器的支持問題。

一、CSS3 新增屬性

（1）邊框

（2）背景

（3）漸變效果

（4）文本

（5）2D

二、CSS3 新增屬性詳解

回到目錄

2.1 邊框樣式

筆記：

border: 1px solid rgba(0, 0, 0, 0.1)

設定元素的邊框爲 1 像素寬、實線、顏色使用 rgba 來表達。
其中，rgba 是 CSS3 中的屬性。rgba 括號中前 3 個數字代表着 red green blue 三種顏色的 rgb 值（0-255）。
最後一個是設定這個顏色的透明度即 alpha 值。範圍從 0 到 1，越接近 1，代表透明度越低。

2.1.1 圓角邊框：border-radius

CSS3圓角只需設置一個屬性：border-radius（含義是"邊框半徑"）。你爲這個屬性提供一個值，就能同時設置四個圓角的半徑。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。

例如：

border-radius: 15px;

表示同時將每個圓角的"水平半徑"（horizontal radius）和"垂直半徑"（vertical radius）都設置爲15px


這是一個簡寫屬性，可以有一個、兩個、三個或四個值進行設置。同樣也可以對盒子的每一個角的半徑進行單獨設置。

（1）border-top-left-radius：左上角
（2）border-top-right-radius：右上角
（3）border-bottom-left-radius：左下角
（4）border-bottom-left-radius：右下角

簡寫
border-radius值的個數以及每個值對應控制的位置：

border-radius 15px /*設置四個角的邊界半徑爲15px*/
border-radius 15px 20px  /*設置左上角和右下角的邊界半徑爲15px，右上角和左下角爲20px*/
border-radius 15px 20px 25px  /*設置左上角的邊界半徑爲15px，右上角和左下角爲20px，右下角爲25px */
border-radius 15px 20px 25px 30px  /*設置左上角爲15px，右上角爲20px，右下角爲25px，左下角爲30px*/

2.1.2 圖形邊框：border-image

border-image 屬性是一個簡寫屬性，用於設置以下屬性：

屬性	描述
border-image-source	用在邊框的圖片的路徑。
border-image-slice	圖片邊框向內偏移。
border-image-width	圖片邊框的寬度。
border-image-outset	邊框圖像區域超出邊框的量。
border-image-repeat	圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。

border-image:url(border-image.png) 40  10px  20px round;

/*其中border-image屬性可以用以下一組屬性代替*/
border-image-source: url(border-image.png);
border-image-slice: 40;
border-image-width: 10px;
border-image-outset: 20px;
border-image-repeat: round;

2.1.3 盒子陰影： box-shadow

語法：

box-shadow: h-shadow v-shadow blur spread color inset

屬性	描述
h-shadow	必需。水平陰影的偏移量。允許負值。
v-shadow	必需。垂直陰影的偏移量。允許負值。
blur	可選。值越大，模糊面積越大，陰影就越大越淡。 不能爲負值。默認爲0，此時陰影邊緣銳利。
spread	可選。陰影的尺寸。取正值時，陰影擴大；取負值時，陰影收縮。默認爲0。
color	可選。陰影的顏色。請參閱 CSS 顏色值。
inset	默認陰影在邊框外。使用 inset 後，陰影在邊框內（即使是透明邊框），背景之上內容之下

box-shadow: 10px 10px 5px #888888;

盒子陰影效果的使用實例

（1）文字卡片

<div class="card">
  <div class="header">
    <h1>1</h1>
  </div>
  <div class="container">
    <p>January 1, 2016</p>
  </div>
</div>

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.header {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    font-size: 40px;
}

div.container {
    padding: 10px;
}

（2）圖片效果

<div class="polaroid">
  <img src="rock600x400.jpg" alt="Norway" style="width:100%">
  <div class="container">
    <p>Hardanger, Norway</p>
  </div>
</div>

div.polaroid {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}
​
div.container {
  padding: 10px;
}

回到目錄

2.2 背景樣式

2.2.1 background-size

background-size 屬性規定背景圖片的尺寸。在 CSS3 之前，背景圖片的尺寸是由圖片的實際尺寸決定的。在 CSS3 中，可以規定背景圖片的尺寸，這就允許我們在不同的環境中重複使用背景圖片。

您能夠以像素或百分比規定尺寸。如果以百分比規定尺寸，那麼尺寸相對於父元素的寬度和高度。

/*給背景圖片增加該屬性之後，原圖片會按照指定大小進行縮放*/
background-size:100px 100px;

/*給背景圖片增加該屬性之後，拉伸填充背景區域*/
background-size:40% 100%;

2.2.2 background-origin

background-origin 屬性規定 background-position 屬性相對於什麼位置來定位。

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

（1）padding-box：背景圖像相對於內邊距框來定位
（2）border-box：背景圖像相對於邊框盒來定位
（3）content-box：背景圖像相對於內容框來定位

2.2.3 background-image

CSS3中可以通過background-image屬性添加背景圖片。不同的背景圖像和圖像用逗號隔開，所有的圖片中顯示在最頂端的爲第一張。

body
{ 
background-image:url(bg1.png),url(bg2.png);
}

回到目錄

2.3 漸變效果

CSS3 漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡

2.3.1 linear-gradients

（1）線性漸變

語法：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...)

 background-image: linear-gradient(#e66465, #9198e5);

（2）從左到右的線性漸變：

 background-image: linear-gradient(to right, red , yellow);

（3）線性漸變 - 對角

/*左上角到右下角*/
 background-image: linear-gradient(to bottom right, red, yellow);

（4）從左到右的線性漸變，帶有透明度：

/* rgba() 函數中的最後一個參數可以是從 0 到 1 的值，它定義了顏色的透明度：
0 表示完全透明，1 表示完全不透明。*/
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

（5）重複的線性漸變
repeating-linear-gradient() 函數用於重複線性漸變

background-image: repeating-linear-gradient(red, yellow 10%, green 20%); 

2.3.2 radial-gradient

（1）徑向漸變

語法

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

 background-image: radial-gradient(red, yellow, green);

回到目錄

2.4 文本效果

2.4.1 text-shadow

（1）文本陰影效果

/* 水平陰影，垂直陰影，模糊的距離，以及陰影的顏色 */
color:#ffff00;
text-shadow: 5px 5px 5px red;

2.4.2 text-overflow

（1）文本溢出屬性

text-overflow屬性指定當文本溢出包含它的元素，應該發生什麼

語法

text-overflow: clip | ellipsis | string;

（1）clip：超出方框部分直接刪除
（2）ellipsis：超出方框部分顯示省略號
（3）string：超出方框部分顯示指定的字符串

	text-overflow: ellipsis
	text-overflow: clip

其他新增文本屬性不一一列出，需要的時候再去官網研究。

2.4.3 字體

使用以前 CSS 的版本，網頁設計師不得不使用用戶計算機上已經安裝的字體。使用 CSS3，網頁設計師可以使用他/她喜歡的任何字體。當你發現您要使用的字體文件時，只需簡單的將字體文件包含在網站中，它會自動下載給需要的用戶

在 CSS3 @font-face 規則中定義

<style> 
@font-face
{
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}
 
div
{
    font-family:myFirstFont;
}
</style>

回到目錄

2.5 2D效果

使用2D效果可以使得元素擁有旋轉，傾斜等靜態效果

語法

transform：translate() | rotate() | scale() | skew() | matrix()

2.5.1 translate()

translate()方法，根據左(X軸)和頂部(Y軸)位置給定的參數，從當前元素位置移動，

/* 從左邊元素移動50個像素，並從頂部移動100像素 */
transform: translate(50px,100px);

2.5.2 rotate()

rotate()方法，在一個給定度數順時針旋轉的元素。負值是允許的，這樣是元素逆時針旋轉。

/* 元素順時針旋轉30度 */
transform: rotate(30deg);

2.5.3 scale()

scale()方法，該元素增加或減少的大小，取決於寬度（X軸）和高度（Y軸）的參數

/* 轉變寬度爲原來的大小的2倍，和其原始大小3倍的高度 */
transform: scale(2,3)

2.5.4 skew()

包含兩個參數值，分別表示X軸和Y軸傾斜的角度，如果第二個參數爲空，則默認爲0，參數爲負表示向相反方向傾斜

/*在X軸和Y軸上傾斜20度30度 */
transform: skew(30deg,20deg)

2.5.5 matrix()

matrix 方法有六個參數，包含旋轉，縮放，移動（平移）和傾斜功能。

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

總結：

實例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<style> 
body
{
	margin:30px;
	background-color:#E9E9E9;
}

div.polaroid
{
	width:294px;
	padding:10px 10px 20px 10px;
	border:1px solid #BFBFBF;
	background-color:white;
	/* Add box-shadow */
	box-shadow:2px 2px 3px #aaaaaa;
}

div.rotate_left
{
	float:left;
	-ms-transform:rotate(7deg); /* IE 9 */
	-webkit-transform:rotate(7deg); /* Safari and Chrome */
	transform:rotate(7deg);
}


</style>
</head>
<body>
<div class="polaroid rotate_left">
<img src="1.png" alt="" width="284" height="213">
<p class="caption">The pulpit rock in Lysefjorden, Norway.</p>
</div>
</body>
</html>

效果：