10.15課堂內容

標籤：color   os   ar   for   sp   on   ad   ef   bs   

blockquote:效果：

<blockquote>一段文字</blockquote>

blockquote{
width: 500px;
height: 300px;
background: rgb(255,253,228);
font-family: "幼圓";
font-size: 20px;
font-weight: bold;
line-height: 40px;
}
blockquote::before{
width: 40px;
height: 34px;
padding-top: 6px;
text-align: center;
content: open-quote;
font-size: 20px;
font-family: "華文琥珀";
/*display: block;*/
border-radius: 100%;
float: left;
color: #fff;
background-color: #bbb;

}
blockquote:after{
content: close-quote;
font-size: 20px;
font-family: "華文琥珀";
}

顏色分布：

.選取器{
width: 200px;
height: 200px;
/*1屬性：漸層角度 2屬性：顏色+空格+純色的長度（百分比、px）。。*/
background:-webkit-linear-gradient(top right,red 50px,yellow);
/*background:-webkit-linear-gradient(-135deg,red 50px,yellow);*/
/*最簡寫法*/
/*background:-moz-linear-gradient(red,yellow); */
/*rgba中的a指的是透明度*/
/*background:-webkit-linear-gradient(left top,rgba(160,232,10,1),rgba(3,188,250,0.5)); */
/*background:-webkit-linear-gradient(-135deg,rgba(160,232,10,1),rgba(3,188,250,0.5)); */
/*可以增加多個顏色，注意後面的百分比>前面的百分比*/
/*background: -webkit-radial-gradient(pink 5px,green 15px,#faa 20px,#000 30px,yellow 40px,blue 50px);
border-radius: 50%;*/
/*重複的線性變換*/
/*background:-webkit-linear-gradient(red,yellow,red,blue,yellow);*/

 

10.15課堂內容