圓角效果

語法：border-radius:?
?可以填一個參數、兩個參數、四個參數：
- 兩個參數，代表左上右下和右上左下。
- 四個參數，代表左上、右上、右下、左下。

利用圓角效果畫半圓

div{
    height:50px;/*是width的一半*/
    width:100px;
    background:#9da;
    border-radius:50px 50px 0 0;/*半徑至少設置爲height的值*/
    }

陰影效果

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

如果需要添加多個陰影，用逗號隔開即可

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

漸變色

background-image:linear-gradient(direction,color1,color2,color3...);

可以添加多個色值，且支持rbga。其中to left可以有以下選項:

參數	含義
to bottom	從上往下
to left	從右往左
to right	從左往右
to top left	從右下到左上
0deg	從上往下，而且指的方向是順時針遞增
90deg	從左往右

注意：角度也支持負數

字體

嵌入字體

語法

@font-face {
    font-family : 字體名稱;
    src : 字體文件在服務器上的相對或絕對路徑;
}

文字陰影

語法

text-shadow: X-Offset Y-Offset blur color;

圖片

background-origin用於設置圖片的原始起始位置

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

三個參數代表從盒子的外邊界開始，從內邊界開始，從盒子內的內容邊界開始

圖片裁剪

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

效果分別爲
圖片拉伸

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

cover代表將圖片等比例拉伸直到圖片的右和下邊都貼到了邊框位置，如果比例不合適，將會溢出邊框，圖片被裁減。
contain代表圖片等比例拉伸，直到有一個邊貼到了邊框位置。

注意可以直接插入多個圖片，只需要在background-image:的url()內多寫幾個即可，並以逗號隔開。在設置其他屬性的時候，按照這個順序。

CSS3選擇器

一、通配符選擇

CSS3增加了三個屬性選擇器，屬性選擇器有了通配符的概念。如下表：

屬性選擇器	功能描述
element[attr^=’var’]	選擇元素且其attr屬性的屬性值值以val開頭
element[attr$=’val’]	選擇元素，具有attr屬性，且attr屬性值以val結尾
element[attr*=’val’	attr任意位置包含了val

例子
html

<body>
<a href="##" class="columnNews">我的背景想變成紅色</a>
<a href="##" class="columnVideo">我的背景想變成紅色</a>
<a href="##" class="columnAboutUs">我的背景想變成紅色</a><br/>
<a href="1.doc">我的背景想變成綠色</a>
<a href="2.doc">我的背景想變成綠色</a><br/>
<a href="##" title="this is a box">我的背景想變成藍色</a>
<a href="##" title="box1">我的背景想變成藍色</a>
<a href="##" title="there is two boxs">我的背景想變成藍色</a>
</body>

 a[class^='column']{
     background-color:red;
 }
 a[href$='doc']{
     background-color:green;
 }
 a[title*='box']{
     background-color:blue;
 }

二、僞選擇器

1、根選擇器

:root{
    ...
}

即選中整個html文檔

2、:not選擇器

從選擇的中不要一部分，語法

ele:not([attr = value]){
    //...
}
//例子如下
div:not([id="footer"]){
  background: orange;
}

3、空選擇器empty

選擇沒有任何內容的元素。空格也算是有元素的，有子節點也算是有元素。
比如要將沒有任何內容的節點隱藏起來，就可以使用這個選擇器。語法

p:empty{
    //選擇沒有內容的空段落
    display:none;//隱藏起來
}

4、：target選擇器

根據我目前的理解是在html中a 有 href=’#target’的錨點指向，在點擊這個a之後修改屬性樣式

#brand:target{
  background: orange;
  color: #fff;
  //在點擊超鏈接之後將target的相關屬性進行修改。
}

5、：first-child/last-child選擇器

ul:first-child{
    //...
}

注意！！！選擇的是第一個元素，而不是兒子元素

6、：nth-child(n)

與first-child類似，首先需要選中兒子元素的集合，然後再用這個選擇器才行。即是選的是第n個元素，而不是第n個子元素。
“:nth-child(n)”選擇器用來定位某個父元素的一個或多個特定的子元素。其中“n”是其參數，而且可以是整數值(1,2,3,4)，也可以是表達式(2n+1、-n+5)和關鍵詞(odd、even)，但參數n的起始值始終是1，而不是0。也就是說，參數n的值爲0時，選擇器將選擇不到任何匹配的元素。
、

<ol>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item9</li>
  <li>item10</li>
</ol>

ol > li:nth-child(2n){
  background: orange;
}

7、：nth-last-child(n)

選中倒數第n個元素。

8、基於類型的子元素選擇

div:nth-of-type(2n+1|even){
    //選擇第奇數個div元素
}

p:first-of-type{
    //選擇第一個p元素
}

.wrapper > p:nth-last-of-type(3){
  background: orange;
}

9、：only-child唯一的子元素

注意要清楚是指什麼有唯一的子元素。
比如

<div class="post">
  <p>我是一個段落</p>
  <p>我是一個段落</p>
</div>
<div class="post">
  <p>我是一個段落</p>
</div>

.post p {
  background: green;
  color: #fff;
  padding: 10px;
}
.post p:only-child {
  background: orange;//指的是p只有一個，即p的父元素只有p這一個子元素。
}

10、：only-of-type選擇器

基於節點類型，即這個節點類型只有唯一的一個。

<div class="wrapper">
  <p>我是一個段落</p>
  <p>我是一個段落</p>
  <p>我是一個段落</p>
  <div>我是一個Div元素</div>
</div>
<div class="wrapper">
  <div>我是一個Div</div>
  <ul>
    <li>我是一個列表項</li>
  </ul>
  <p>我是一個段落</p>
</div>

.wrapper > div:only-of-type {
  background: orange;
}

11、:enabled選擇器

這個是針對一些text輸入框，複選框等有enabled屬性的。與之相對的是:disabled選擇器

<form action="#">
  <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" placeholder="可用輸入框"  />
  </div>
   <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" placeholder="禁用輸入框"  disabled="disabled" />
  </div>
</form>

div{
  margin: 20px;
}
input[type="text"]:enabled {
  background: #ccc;
  border: 2px solid red;
}

12、:checked選擇器

13、::selection選擇器

即文本被選中時候的樣式。注意Firefox瀏覽器會有不同

::-moz-selection {
  background: red;
  color: green;
}//火狐瀏覽器寫法

::selection {
  background: red;
  color: green;
}

:read-only/read-write

選擇只讀元素/選擇讀寫元素

變換篇

旋轉rotate()

rotate(degree)來設置對象的旋轉，正值爲順時針旋轉。

transform:rotate(45deg);
-webkit-transform(45deg);

語法	瀏覽器
-ms-transform:rotate(7deg)	-ms代表ie內核識別碼
-moz-transform:rotate(7deg)	-moz代表火狐內核識別碼
-webkit-transform:rotate(7deg)	-webkit代表谷歌內核識別碼
-o-transform:rotate(7deg)	-o代表歐朋【opera】內核識別碼
transform:rotate(7deg)	統一標識語句。。。最好這句話也寫下去，符合w3c標準

扭曲skew()

扭曲skew()函數能夠讓元素傾斜顯示。它可以將一個對象以其中心位置圍繞着X軸和Y軸按照一定的角度傾斜。這與rotate()函數的旋轉不同，rotate()函數只是旋轉，而不會改變元素的形狀。skew()函數不會旋轉，而只會改變元素的形狀。

skew(x,y);//沿x,y方向扭曲x,y的角度
skewX(x);//沿x方向扭曲x的角度，相當於skew(x)，即只有一個參數
skewY(y);//沿y方向扭曲y的角度

縮放scale()

參數是以1爲標準的浮點數。

函數	含義
scale(x,y)	在x,y方向同時縮放，注意y是可選參數，如果沒有則y=x
scaleX(x)	僅在x方向上縮放
scaleY(y)	僅在y方向縮放

位移translate()

函數	含義
translate(x,y)	在x,y方向同時位移，參數支持百分比（百分比是相對於自身的長寬）
translateX(x)	僅在x方向上
translateY(y)	僅在y方向

針對百分比，舉一個栗子

div{
    width:400px;
    height:400px;
    position:absolute;
    top:50%;
    left:50%;
    translate(-50%,-50%);
}

top和left屬性將div的左上角挪到了中央，但是整個div的中心卻不在頁面中央，因此可以通過-50%的位移來讓div中心到頁面中央！。

矩陣變換matrix()

據網友說是這樣的

matrix(scaleX(),skewX(),skewY(),scaleY(),translateX(),translateY());

變形原點transform-origin

通過top left bottom right等設置，允許top left這種寫法，也可以支持百分比 x y

wannomore

發佈了28 篇原創文章 · 獲贊 3 · 訪問量 1萬+

私信關注

CSS3學習