iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 29
0
Modern Web

前端網頁設計學習旅程系列 第 29

Day29_CSS3

突然回到CSS好像有點跳tone,主要是因為在CSS & Javascript的基礎不夠熟練
vue學起來有些吃力,還是得好好把基本功練熟

CSS3

CSS3基本上就是CSS的進化版,CSS3增加了幾個新的語法來提高樣式的層次增加可以使用的語法
以下直接看例子

CSS3圓角

div
{
	border:2px solid ;
	width:300px;
	border-radius:25px;
}

https://ithelp.ithome.com.tw/upload/images/20201011/20130503xzsl6orXb6.png


陰影

div
{
	width:300px;
	height:100px;
	background-color:yellow;
	box-shadow: 10px 10px 5px ;
}

https://ithelp.ithome.com.tw/upload/images/20201011/20130503WjYXOQYFyR.png


邊框圖片

CSS3提供兩種邊框圖片的定義模式

div
{
	border:15px solid transparent;
	width:250px;
	padding:10px 20px;
}

#round
{
	border-image:url(border.png) 30 30 round;
}

#stretch
{
	border-image:url(border.png) 30 30 stretch;
}

https://ithelp.ithome.com.tw/upload/images/20201011/201305037Ko2Ofjycp.png

漸層效果

從上到下

從上到下的漸層效果

#grad1 {
    height: 200px;
    background-image: linear-gradient(#ff3411, #33ff67);
}

https://ithelp.ithome.com.tw/upload/images/20201011/20130503nhYqJSZlUi.png
https://ithelp.ithome.com.tw/upload/images/20201011/20130503ghChmuVSXy.png

從左到右

#grad1 {
    height: 200px;
    background-image: linear-gradient(to right, green , orange);
}

https://ithelp.ithome.com.tw/upload/images/20201011/2013050339J20unetc.png

對角

從左上到右下

#grad1 {
    height: 200px;
    background-image: linear-gradient(to bottom right, red , yellow);
}

角度漸層

#grad1 {
  height: 100px;
  background-image: linear-gradient(0deg, blue, orange); 
}

#grad2 {
  height: 100px;
  background-image: linear-gradient(90deg, blue, orange); 
}

#grad3 {
  height: 100px;
  background-image: linear-gradient(180deg, blue, orange); 
}

#grad4 {
  height: 100px;
  background-image: linear-gradient(-90deg, blue, orange); 
}

https://ithelp.ithome.com.tw/upload/images/20201011/20130503A6bLGOsOey.png

彩虹漸層

#grad2 {
    height: 200px;
	background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet); 
}

https://ithelp.ithome.com.tw/upload/images/20201011/20130503SlybJy8c1l.png

其他還有一些效果,可以參考W3C


上一篇
Day28_vuejs-get starts
下一篇
Day30_CSS3-Text效果
系列文
前端網頁設計學習旅程30

尚未有邦友留言

立即登入留言