<!doctype html>
<html>
<head>
<title>CSS3顏色</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
#box{
background-color: blue;
height: 200px;
width: 200px;
margin: 40px auto;
padding: 40px;
box-sizing: border-box;
/*box-sizing: border-box; 這個元素的內距和邊框將不會增加元素本身的寬度。*/
/*border-radius: 20px;*/
/*border-radius 設定圓角，4個角同時設定*/
border-bottom-left-radius:100px;
/*border-bottom-left-radius: 只設定左下角*/
border-top-right-radius: 100px;
/*border-top-right-radius: 只設定右上角*/
/*background: linear-gradient(blue,white)*/;
/* background: linear-gradient 線性漸變，默認為由上至下*/
/*background: linear-gradient( to right, blue, white);*/
/*改變線性漸變方向(to right, left, top, bottom)或是角度(50deg)*/
background: radial-gradient(rgba(255,255,255,0.5), blue, black);
/*background: radial-gradient擴散漸變，從內到外*/
}
body#colors{
background-color: rgb(25,52,84);
color: white;
}
#colors #contain{
width: 600px;
margin: 0 auto;
padding: 40px;
box-sizing: border-box;
background: rgba(255,255,255,0.5); /*a 指的是透明度*/
}
</style>
</head>
<body id="colors">
<div id="contain">
<h1>CSS3 colors</h1>
<div id="box">Gradient</div>
</div>
</body>
</html>
留言列表
Impression (1)
