为了账号安全,请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
十天精通CSS3_学习笔记_慕课网
为了账号安全,请及时绑定邮箱和手机立即绑定

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
  • background-size 设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。 语法: background-size: auto | <长度值> | <百分比> | cover | contain 取值说明: 1、auto:默认值,不改变背景图片的原始高度和宽度; 2、<长度值>:成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放; 3、<百分比>:0%~100%之间的任何值,将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值,当设置一个值时同上; 4、cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器; 5、contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。
    查看全部
  • size最好用%,不要直接写像素,因为这样当元素本身size更改时,背景会等比例变化
    查看全部
  • 如果有 size 值,需要紧跟 position 并且用 "/" 隔开
    查看全部
  • background-clip用来将背景图片做适当的裁剪以适应实际需要。 语法: background-clip:border-box|padding-box|content-box|no-clip; 参数分别表示从边框(默认值)、内填充或者内容区域向外裁剪背景。no-clip表示不裁剪,和参数border-box显示同样的效果。(裁剪时是从边框开始填充的)
    查看全部
  • text-shadow:x轴坐标 y轴坐标 阴影模糊程度 颜色 x y轴偏移单位可为px,em,百分比,可为负数
    查看全部
  • background-origin设置元素背景图片的原始起始位置。 语法: background-origin:border-box|padding-box|content-box; 参数分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始显示。 注意:如果背景图片不是no-repeat的,则此属性无效。他会从边框开始显示。
    查看全部
  • text-shadow可以用来设置文本的阴影效果。 语法: text-shadow:X-Offset Y-Offset blur color; X-Offset:表示阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向左偏移; Y-Offset:表示阴影的垂直偏移距离,其值为正值时阴影向下偏移,反之向上偏移; blur:指阴影的模糊程度,其值不能为负,如果值越大阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以设置为0; color:指阴影的颜色,可以使用rgba色
    查看全部
  • 联网状态下,用户页面可现实未安装的字体
    查看全部
  • 用省略号表示溢出内容,需定义 ①强制文本在一行内显示white-space:nowrap ②溢出内容为隐藏overflow:hidden ③溢出文本显示省略号text-overflow:ellipsis
    查看全部
  • @font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体。 语法: @font-face{ font-family:字体名称; src:字体文件在服务器上的相对或绝对路径; } 其中字体名称为自定义的名称。 这样设置之后,就可以像使用普通字体一样在(font-*)中设置字体样式。例如: p{ font-size:12px; font-family:"字体名称";/*必须项,设置与@font-face中font-family同样的值*/ }
    查看全部
  • CSS3 Gradient分为线性渐变(linear)和径向渐变(radial)。 语法:background-image:linear-gradient(to bottom,#fff,#999); 第一个参数是指定渐变方向,可以用“角度”的关键词或“英文”来表示,省略时默认为180deg,等同于"to bottom"
    查看全部
  • RGB是一种色彩标准,是由R(红)、G(绿)、B(蓝)的变化及相互叠加来得到各式各样的颜色,RGBA是在RGB的基础上增加了控制alpha透明度的参数
    查看全部
  • 多行显示的方法:overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    查看全部
  • 用来将背景图片做适当的裁剪以适应实际需要。 语法: background-clip : border-box | padding-box | content-box | no-clip 参数分别表示从边框、或内填充,或者内容区域向外裁剪背景。no-clip表示不裁切,和参数border-box显示同样的效果。backgroud-clip默认值为border-box。
    查看全部
  • 设置元素背景图片的原始起始位置。 语法: background-origin : border-box | padding-box | content-box; 参数分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始显示。 注意的是,如果背景不是no-repeat,这个属性无效,它会从边框开始显示。
    查看全部

举报

0/150
提交
取消
课程须知
1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下,建议使用 chrome、safari、firefox、opera浏览器学习本课程。
老师告诉你能学到什么?
1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!