10.15课堂内容

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);*/

 

转载于:https://www.cnblogs.com/chenjiren0109/p/4027726.html