做不好的网站违法吗,肇庆网站建设维护,html素材库,网络系统管理是做什么的目录 一、新增长度单位 二、新增盒子属性
1.border-box 怪异盒模型 2.resize 调整盒子大小 3.box-shadow 盒子阴影
案例#xff1a;鼠标悬浮盒子上时#xff0c;盒子有一个过度的阴影效果 三、新增背景属性
1.background-origin 设置背景图的原点 2.background-clip 设置背…目录 一、新增长度单位 二、新增盒子属性
1.border-box 怪异盒模型 2.resize 调整盒子大小 3.box-shadow 盒子阴影
案例鼠标悬浮盒子上时盒子有一个过度的阴影效果 三、新增背景属性
1.background-origin 设置背景图的原点 2.background-clip 设置背景图向外裁剪的区域
案例让背景图呈现在文字上 3.background-size 设置背景图的尺寸 4.多背景图,用逗号隔开 四、新增文本属性
1.text-shadow 文本阴影 2.white-space 文本换行
3.text-overflow 文本溢出
案例一行超出的文本用...表示 4.text-decoration 文本修饰 5.-webkit-text-stroke 文本描边 五、新增渐变
1.linear-gradient 线性渐变 2.radial-gradient 径向渐变 3.重复渐变
4.案例 六、web字体 一、新增长度单位
①vw:相对于视口宽度的百分比
②vh:相对于视口高度的百分比
div{width:20vw;height:20vh;
} 二、新增盒子属性
1.border-box 怪异盒模型
div{width:200px;height:200px;border:5px solid #fff;box-sizing:boeder-box;
} 2.resize 调整盒子大小 resize一定要和overflow一起用
div classbox1div classbox2/div
/div.box1{width:400px;height:400px;resize:both;overflow:scroll;background:orange;
}.box2{width:800px;height:800px;background:blue;
} 3.box-shadow 盒子阴影
案例鼠标悬浮盒子上时盒子有一个过度的阴影效果
div{width:300px;height:300px;background:orange;transition:1s linear all;
}div:hover{box-shadow:0 0 10px black;
}三、新增背景属性
1.background-origin 设置背景图的原点
div{width:200px;height:200px;padding:20px;border:20px dashed pink;background-color:bule;background-image:url(../../image.png);background-repeat:no-repeat;background-origin:border-box;
} 2.background-clip 设置背景图向外裁剪的区域
案例让背景图呈现在文字上
1.设置字体颜色为透明色
2.设置background-cliptext
3.在background-clip前加上私有前缀 3.background-size 设置背景图的尺寸 4.多背景图,用逗号隔开
不能用background-image 四、新增文本属性
1.text-shadow 文本阴影
h1{background:black;text-shadow:0 0 20px red;color:#fff;margin:0 auto;
} 2.white-space 文本换行 3.text-overflow 文本溢出
案例一行超出的文本用...表示
div{width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;
} 4.text-decoration 文本修饰
p{text-decoration-line:underline;text-decoration-style:wavy;text-decoration-color:red;
} 5.-webkit-text-stroke 文本描边
h1{-webkit-text-stroke:1px red;color:transparent;
} 五、新增渐变
1.linear-gradient 线性渐变
.box1{height:200px;background-image: linear-gradient(red, yellow,green);
}.box2{height:200px;background-image: linear-gradient(to right top, red, yellow,green);//往右上角
}.box3{height:200px;background-image: linear-gradient(30deg, red, yellow,green); //顺时针偏转30度
}.box4{height:200px;background-image: linear-gradient(red 50px, yellow 100px,green 150px);
}.box5{height: 200px;background-image: linear-gradient(red 50px, yellow 100px,green 150px);-webkit-background-clip:text;color:transparent;font-size:80px;text-align:center;
} 2.radial-gradient 径向渐变
.box1{width:300px;height:200px;background-image: radial-gradient(red, yellow,green);//默认从圆心四散
}.box2{width:300px;height:200px;background-image: radial-gradient(at right top, red, yellow,green);//调整圆心的位置
}.box3{width:300px;height:200px;background-image: radial-gradient(at 100px 50px, red, yellow,green);
}.box4{width:300px;height:200px;background-image: radial-gradient(circle, red, yellow,green);
}.box5{width:300px;height:200px;background-image: radial-gradient(200px 200px, red, yellow,green);//半径为200px
}.box6{width:300px;height:200px;background-image: radial-gradient(red 50px, yellow 100px ,green 150px);//从圆心开始50px红色100px黄色150px绿色}.box7{width:300px;height:200px;background-image: radial-gradient(100px 50px at 150px 150px,red, yellow,green);//圆心x100px y100px 半径x100px y50px}3.重复渐变
在设有具体像素值的线性渐变或者径向渐变前加上repeating-
4.案例
书签页 立体的球
#grad1 {width:200px;height: 200px;border-radius:50%;background-image: radial-gradient(at 80px 80px,#e66465, #9198e5);
}
#grad2{width:800px;height: 390px;padding:0 10px;border:1px solid black;background-image: repeating-linear-gradient(transparent 0px, transparent 29px, gray 30px);background-clip:content-box;//默认是border-box从border向外裁剪设成content-box,从content向外裁剪
} 六、web字体
