专栏首页菜鸟前端工程师html+css学习笔记017-H5新背景属性0颜色0倒影0遮罩

html+css学习笔记017-H5新背景属性0颜色0倒影0遮罩

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • html+css学习笔记002-盒子模型

    怕的不是我们不懂英文 怕的不是我们不懂操作电脑 怕的更不是我们不懂基础程序语言

    Mr. 柳上原
  • JavaScript学习笔记002-数据类型0字符串拼接

    [十位] [个位] [几何] [子集] [大圆] [小圆] [元素] [下标] [分子] [分母] [分数] [中点] [约分] [加数] [减数]

    Mr. 柳上原
  • 2018-09-12nodejs博客项目

    Mr. 柳上原
  • 3d魔方动画

    河湾欢儿
  • CSS3 3D旋转立方体 原

    主要用到动画css3  animation,特别注意当完成正方体的过程中,每个面旋转时这个面的坐标系是跟着变换的,只是他们的相对位置不变,默认的变换基点是(50...

    tianyawhl
  • 关于元素间的边距重叠问题与BFC

    BFC(Block Formatting Context),即块级格式化上下文,创建了 BFC 的元素是一个独立的容器,里面无论如何布局都不会影响到外面的元素

    Leophen
  • 只用1个div,你能用CSS常规属性绘制:正3、4、5、6、7、8边形吗?

    今天我们来玩一个有趣的CSS实验,想象下,只用一个div,你能用CSS绘制一个正三角形,正方形,正五边形,正六边形,正七边形,正八边形吗?

    前端达人
  • 【CCF】工资计算

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    喜欢ctrl的cxk
  • 在Win10中使用Gazebo9+进行机器人仿真

    还有一些小伙伴反馈我博客翻译或者搬运过程有缺失,为了防止误导,尽力避免此类情况出现:

    zhangrelay
  • 为什么DB连接管理一般不采用IO多路复用?

    大宽宽

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动