html+css学习笔记017-H5新背景属性0颜色0倒影0遮罩
2018-06-06 本文已影响8人
Mr柳上原
Author：Mr.柳上原
- 付出不亚于任何的努力
- 愿我们所有的努力，都不会被生活辜负
- 不忘初心，方得始终
深刻的感觉到一个强大的文案就是一家公司的营销精髓
比如：
《卫龙》
《阅后即瞎》
《网易论坛》
《vivo商城客服》
......
<!DOCTYPE html> <!-- 文档类型：标准html文档 -->
<html lang='en'> <!-- html根标签 翻译文字：英文 -->
<head> <!-- 网页头部 -->
<meat charset='UTF-8'/> <!-- 网页字符编码 -->
<meat name='Keywords' content='关键词1,关键词2'/>
<meat name='Description' content='网站说明'/>
<meat name='Author' content='作者'/>
<title>前端59期学员作业</title> <!-- 网页标题 -->
<link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外链样式表 -->
<style type='text/css'> /*内部样式表*/
/* 新增背景属性 */
div{
width:100px;
height:100px;
background:url(./images/img.jpg) no-repeat;
background-origin:padding-box; /* 背景图片显示的起始位置 */
padding-box 从padding区域开始显示背景图片（默认）
content-box 从内容区域开始显示背景图片
border-box 从边框线开始显示背景图片
background-clip:padding-box; /* 背景剪裁 */
padding-box 把padding区域以外的背景图片裁剪掉
content-box 把内容以外的背景图片裁剪掉
border-box 把边框线以外的背景图片裁剪掉
}
/* 新增颜色属性 */
div{
width:100px;
heigth:100px;
background-color:hsl();
hue 色调（0，360 红色 120 绿色 240 蓝色）
saturation 饱和度（0%~100%）
lightness 亮度（0%~100%）
a 透明度（0~1）
}
/* 新增渐变属性 */
div{
width:100px;
height:100px;
background-image:linear-gradient(to left,red,green); /* 线性渐变 */
渐变方向：
to （left right top bottom） 关键词
30deg 度数值
}
div{
width:100px;
height:100px;
background-image:radial-gradient(at left,red,green); /* 径向渐变 */
渐变方向：
at（left right center top bottom） 关键词
渐变形状：
ellipse 椭圆（默认）
circle 正圆
渐变半径：
px 半径值（椭圆两个半径值，正圆一个半径值）
farthest-corner 半径为圆心到最远角度的距离（默认）
closest-corner 半径为圆心到最近角度的距离
farthest-side 半径问圆心到最远边的距离
closest-side 半径问圆心到最近边的距离
｝
div{
width:100px;
height:100px;
background-image:repeating-radial-gradient(at left,red,red 20%,green 20%,green 40%); /* 重复径向渐变 */
background-image:repeating-linear-gradient(to left,red,red 20%,green 20%,green 40%); /* 重复线性渐变 */
｝
/* 倒影 */
div{
width:100px;
height:100px;
background:url('./images/1.jpg') no-repeat center/cover;
-webkit-box-reflect:right 0px url('倒影遮罩：必须为png透明图片'); /* 倒影：不占位置 */
direction 倒影位置（left right above below）
affset 倒影和实像之间的距离 可以为负值
-webkit-mask-image:url(' '); /* 遮罩 */
-webkit-mask-position:center; /* 遮罩位置 */
-webkit-mask-size:cover; /* 遮罩大小 */
-webkit-mask-repeat:no-repeat; /* 遮罩平铺 */
-webkit-mask:url(' ') no-repeat center/cover; /* 复合写法 */
}
</style>
</head>
<body> <!-- 网页主干：可视化区域 -->
<div> </div> <!-- 块标签-->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
