移動端開發-CSS3篇
選擇器
- 1.基本選擇器：
- *
- #
- .
- 後代選擇器
- 子代選擇器
- 相鄰弟弟(+)
- 全部弟弟(~)
- 組合選擇器(,)
- 屬性選擇器
- div[class]{只是用屬性名 選擇出含有這個屬性名的元素}
- div[class="box1"]{指定屬性名=屬性值 必須是如出一轍}
- div[class="box"]{屬性名中包含了指定的屬性值只要屬性值這個字符串中含有指定屬性值字符*}
- div[class~="box"]{先將屬性值按照空格拆分再判斷是否含有屬性值}
- div[class^="box"]{屬性值以什麼什麼開頭}
- div[class$="box2"]{屬性值以什麼什麼結尾}
- div[class|="box"]{屬性名等於box或者是以box-爲前綴}
- 動態僞類選擇器
- a:hover{鼠標放上}
- a:focus{獲取焦點 通常用在表單元素上}
- a:active{鼠標點一下的時候效果}
- a:visited{通常用在錨點連接 連接被訪問過}
- a:link{通常用在錨點連接 連接未被訪問過}
- UI僞類選擇器 Ie6-8不支持這三
- input:disabled{}
- input:enabled{}
- input:checked{}
- 結構僞類選擇器
- div:first-child{選擇第一個子元素}
- div :last-child{選擇最後一個子元素}
- div :nth-child(2){
*選取第幾個子元素 從前面數* *nth-child(n) 全部的n是整數從1開始* *nth-child(3n)* *nth-child(2n)* *nth-child(2n+1)* }複製代碼- div :nth-last-child(1){倒着數}
- div :nth-of-type(2){同類型的第幾個 從頭開始數}
- div :nth-last-of-type(1){從結尾開始數}
- ul :first-of-type{同類型的第一個}
- ul :last-of-type{同類型的最後一個}
- div :only-child{父級只有他一個孩子}
- div :only-of-type{父級只有他一個同類型孩子}
- div :empty{沒有任何內容的div裏面的元素}
- 僞元素選擇器（僞元素 :: :均可以）
- :after
- :before
- :first-line
- :first-letter
漸變
線性漸變
- 從頂部到底部：top,to bottom,
- 從底部到頂部：bottom,to top,
- 從左到右：left，to right
- 從右到左：left，to right
- 從右下角到左上角：bottom right，to top left，
- 從左下角到右上角：bottom left，to top right，
- 自定義漸變 顏色後面加百分比
徑向漸變
- 50px 200px
- circle
- ellipse
- 200px 200px at 0px 0px
- circle at top
- circle at 0 50%
- circle closest-side/closest-corner
- circle farthest-side/farthest-corner
- -webkit-repeating-radial-gradient
邊框
box-show（x y a b c i）
x:水平方向偏移 正：右邊 負值：左邊
y:垂直方向偏移 正：下邊 負值：上邊
a:模糊半徑
b:延伸半徑
c:顏色
i:inset 設置內陰影複製代碼
border-radius
border-radius:50px 70px 60px/80px 90px 70px；
border-top-left-radius: 30px 40px;
半圓
橢圓複製代碼
border-images
stretch 拉伸 默認值
round 平鋪
repeat 複製複製代碼
製做按鈕
.border-image-btn{
display: inline-block;
border: 18px solid green;
border-width:0 18px ;
border-image: url(../img/button_sprite.png) 0 18 50 18;
text-decoration: none;
padding: 13px 10px 17px;
color: #fff;
font-size: 16px;
font-weight:bold;
line-height: 15px;
margin: 10px;
}
.border-image-btn:hover{
border-image: url(../img/button_sprite.png) 50 18 0 18;
text-decoration: none;
}複製代碼
背景
background-origin
顧上不顧下，顧左不顧右，只要超出邊框就能夠web
- border-box 從border的外邊界算起
- padding-box 從padding的外邊界算起 也就是把padding算在內
- content-box 從padding的內邊界算起
background-clip
- border-box
- padding-box
- content-box
###背景圖片的字體
webkit-background-clip: text;
-webkit-text-fill-color: transparent;bash
###background-sizeide
- auto 默認值
- 100% 100%
- cover 將圖片放大 以適應鋪滿整個容器 寬高比例不變 會使圖片失真
- contain 將圖片縮小 目的是在容器中將圖片徹底展現 原來寬高比例不變 會使圖片失真
多背景圖，製做相框
.box{
width: 240px;
font-size: 25px;
line-height: 1.5;
text-align: center;
border:20px solid rgba(104,104,142,.5);
padding: 60px 40px;
border-radius:10px ;
color: #f36;
background: url(../img/bg-tl.png) no-repeat top left,
url(../img/bg-tr.png) no-repeat top right,
url(../img/bg-br.png) no-repeat bottom right,
url(../img/bg-bl.png) no-repeat bottom left,
url(../img/bg-repeat.png) repeat left top;
background-origin: border-box,border-box,border-box,border-box,padding-box;
}複製代碼
文本
text-overflow:clip/ellipsis
- clip:表示不顯示省略標記 只是簡單的裁剪，可是在必定的高度範圍內配合使用overflow：hidden
- ellipsis:超出部分用省略號表示 配合使用overflow：hidden white-space: nowrap 纔有效果;
word-wrap:normal|break-word
- norma:默認值 控制連續文本換行（容許內容撐破容器邊界
- break-word:將內容在容器邊界換行（不截斷英文單詞例如：aaaaaa）若是想截斷英文單詞就用word-break:all;
word-break:normal|break-all|keep-all
- word-break:normal 默認值中文換行 英文不換行
- word-break:break-all 能夠強行截斷英文換行
- word-break:keep-all 不容許：斷開。中文把先後標點符號內的一個漢字或短語整個換行
text-show
.text-wrap{
background-color: #665757;
width: 600px;
margin: 15px auto;
padding: 10px 0;
border: 5px solid #ccc;
position: relative;
font-size: 50px;
color: #f7edf7;
clear: both;
text-align: center;
letter-spacing: 5px;
box-shadow: 0 0 0 rgb(188,178,188),
1px 1px 0 rgb(173,163,173),
2px 2px 0 rgb(157,147,157),
3px 3px 0 rgb(142,132,142),
4px 4px 0 rgb(126,116,126),
5px 5px 0 rgb(111,101,111),
6px 6px 5px rgba(0,0,0,0.4);
}
.text2{
text-shadow: 0 0 0 rgb(188,178,188),
1px -1px 0 rgb(173,163,173),
2px -2px 0 rgb(157,147,157),
3px -3px 0 rgb(142,132,142),
4px -4px 0 rgb(126,116,126),
5px -5px 0 rgb(111,101,111),
6px -6px 0 rgb(95,85,95),
7px -7px 0 rgb(79,69,79),
8px -8px 7px rgba(0,0,0,.2),
8px -8px 1px rgba(0,0,0,.5),
0px 0px 7px rgba(0,0,0,.3);
}
.text1:active{
box-shadow: 0 0 0 rgb(188,178,188),
1px 1px 0 rgb(173,163,173);
top:14px;
}複製代碼
字體圖標
製做按鈕
.btn-bevel{
border: none;
border-radius: 4px;
padding: 10px 25px 12px;
font-family: arial,helvetica,sans-serif;
font-size: 13px;
color: #fff;
text-decoration: none;
text-align: center;
display: inline-block;
margin: 10px;
cursor: pointer;
text-shadow: 0 1px 1px rgba(0,0,0,0.4);
background: rgb(120,107,201);
background: -webkit-linear- gradient
(top,rgba(120,107,201,1),
rgba(120,107,201,0.8),
rgba(120,107,201,0.5),
rgba(120,107,201,0.3));
box-shadow: rgba(120,107,201,0.5) 1px 6px 0,
rgba(0,0,0,0.3) 1px 10px 3px;
}
.btn-bevel:active{
position: relative;
top:5px;
box-shadow: rgba(120,107,201,0.7) 0px 1px 3px;
}
.btn{
border: none;
outline: none;
display: inline-block;
width: 80px;
height: 80px;
border-radius:50% ;
margin-right: 90px;
font-size: 0;
background: #e982ab;
box-shadow:0 1px 5px rgba(255,255,255,0.5) inset,
0 -2px 5px rgba(0,0,0,0.5) inset,
0 3px 8px rgba(0,0,0,0.8);
background: -webkit-radial-gradient
(closest-corner circle at top,#f28fb8,#e982ab,#ec568c);
}
.btn:hover:after{
color: #fff;
text-shadow:0 1px 20px #fccdda,1px 0px 15px #fccdda ;
}
.btn:active{
box-shadow:0 2px 2px rgba(0,0,0,0.5) inset,
0 -3px 10px rgba(0,0,0,0.1) inset,
0 2px 4px rgba(255,255,255,0.8);
background: -webkit-radial-gradient
(closest-corner circle at bottom,
#f28fb8,#e982ab,#ec568c);
}複製代碼
配色
rgb(0-255紅,0-255綠,0-255藍)
rgba(0-255紅,0-255綠,0-255藍,opacity)
HSL(H色調,S飽和度,L亮度)
HSLa(H色調,S飽和度,L亮度,opacity)
HSL色彩模式 是工業界的一種顏色標準
Hue:色調 0(360)紅色 60黃色 120綠色 180天藍色 240blue 300紫紅色
中間能夠隨意取值來表明其餘顏色
Saturation(飽和度) 0%-100%
Lightness(亮度) 0%-100%複製代碼
濾鏡filter
- grayscale(1)：灰度
- sepia(1) 褐色
- saturate(500%) 飽和度
- hue-rotate(180deg) 色相反轉
- invert(1) 反色
- opacity(0.6) 透明度
- brightness(250%) 亮度
- contrast(200%) 對比度
- blur(5px) 模糊度
- drop-shadow(2px 3px 5px rgba(0,0,0,0.8)) 陰影
2D變形
平移
translate(x,y) 若是你傳了一個就是translateX(x)
translateX(x)
translateY(y)複製代碼
縮放
scale(n) n:(0-1) 縮小 > 1表示放大
scaleX(nX)
scaleY(ny)複製代碼
旋轉
rotate(deg)複製代碼
傾斜
skew(xdeg,ydeg) 若是傳一個值表明 skewX(xdeg)
skewX(xdeg)
skewY(ydeg)複製代碼
順序問題
過渡
transition: opacity 2s 1s ease-out ;
ease:漸漸慢
linear：勻速直線運動
ease-in:由慢變快
ease-out：由快變慢
ease-in-out：由慢變快再變慢 複製代碼
3D變形
transform-style: preserve-3d;
translateZ
rotateX，rotateY，rotateZ
rotate3d()複製代碼
相關文章
- 1. 移動端開發
- 2. 大前端全棧CSS3移動端開發
- 3. CSS3 Media Query：移動Web開發的完美開端
- 4. 【移動端開發】移動端開發基礎問題
- 5. Python開發【前端篇】HTML5+CSS3
- 6. H5移動前端開發經常使用高能css3彙總
- 7. 05-移動端開發教程-CSS3兼容處理
- 8. 移動端開發基礎
- 9. 移動端開發規範
- 10. 移動端開發學習
- 更多相關文章...
- • 移動設備 統計 - 瀏覽器信息
- • WSDL 端口 - WSDL 教程
- • PHP開發工具
- • JDK13 GA發佈：5大特性解讀
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 安裝cuda+cuDNN
- 2. GitHub的使用說明
- 3. phpDocumentor使用教程【安裝PHPDocumentor】
- 4. yarn run build報錯Component is not found in path 「npm/taro-ui/dist/weapp/components/rate/index「
- 5. 精講Haproxy搭建Web集羣
- 6. 安全測試基礎之MySQL
- 7. C/C++編程筆記：C語言中的複雜聲明分析，用實例帶你完全讀懂
- 8. Python3教程(1)----搭建Python環境
- 9. 李宏毅機器學習課程筆記2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里雲ECS配置速記
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 移動端開發
- 2. 大前端全棧CSS3移動端開發
- 3. CSS3 Media Query：移動Web開發的完美開端
- 4. 【移動端開發】移動端開發基礎問題
- 5. Python開發【前端篇】HTML5+CSS3
- 6. H5移動前端開發經常使用高能css3彙總
- 7. 05-移動端開發教程-CSS3兼容處理
- 8. 移動端開發基礎
- 9. 移動端開發規範
- 10. 移動端開發學習