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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
  • text-shadow:设置文本的阴影效果 语法:text-shadow: X-Offset Y-Offset blur color; 参数: X-Offset:表示阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向左偏移; Y-Offset:是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移,反之向上偏移; Blur:是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0; Color:是指阴影的颜色,其可以使用rgba色。 例:
    查看全部
  • @font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体。 例:
    查看全部
  • 1.text-overflow:用来设置是否使用一个省略标记(...)标示对象内文本的溢出。 例:http://img1.sycdn.imooc.com//53070cc00001a5bc06000200.jpg 【注意:text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果。即: text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 】 2.word-wrap:可以用来设置文本行为,当前行超过指定容器的边界时是否断开转行 例:http://img1.sycdn.imooc.com//53070cf700018a2b06000200.jpg 参数:normal为浏览器默认值,break-word设置在长单词或 URL地址内部进行换行,此属性不常用,用浏览器默认值即可
    查看全部
  • 渐变色彩:CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。 线性渐变:http://img1.sycdn.imooc.com//54b72b2e0001500103790158.jpg 参数:http://img1.sycdn.imooc.com//542a25da00017e9406980223.jpg 第一个参数:指定渐变方向,可以用“角度”的关键词或“英文”来表示(省略时,默认为“180deg”,等同于“to bottom”); 第二个和第三个参数,表示颜色的起始点和结束点,可以有多个颜色值。 例:background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet); 效果:http://img1.sycdn.imooc.com//54b72c080001611c04230192.jpg
    查看全部
  • RGB是一种色彩标准,是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色; RGBA是在RGB的基础上增加了控制alpha透明度的参数。 语法:color:rgba(R,G,B,A) 参数:R、G、B三个参数,正整数值的取值范围为:0 - 255。百分数值的取值范围为:0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数,取值在0~1之间,不可为负值。 例:
    查看全部
  • border-image:为边框应用背景图片 语法:background:url(xx.jpg) 10px 20px no-repeat; 解释:http://img1.sycdn.imooc.com//52e2201a0001b1e004720260.jpg 参数: repeat就是一直重复,然后超出部分剪裁掉,而且是居中开始重复; Round可以理解为圆满的铺满。为了实现圆满所以会压缩(或拉伸) 例:
    查看全部
  • 阴影模糊半径与阴影扩展半径的区别 阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊; 阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;
    查看全部
  • box-shadow:向盒子添加阴影 语法: box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 名词解释:http://img1.sycdn.imooc.com//54292d620001ffb107080250.jpg 【注意:inset 可以写在参数的第一个或最后一个,其它位置是无效的】
    查看全部
  • border-radius:向元素添加圆角边框。
    查看全部
  • 在编写CSS3样式时,不同的浏览器可能需要不同的前缀。 它表示该CSS属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性。 前缀 浏览器 -webkit chrome和safari -moz firefox -ms IE -o opera
    查看全部
    0 采集 收起 来源:什么是CSS3?

    2015-05-13

  • background-origin 设置元素背景图片的原始起始位置。 语法: background-origin : border-box | padding-box | content-box; 参数分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始显示。 需要注意的是,如果背景不是no-repeat,这个属性无效,它会从边框开始显示。
    查看全部
  • 文本阴影text-shadow text-shadow可以用来设置文本的阴影效果。 语法: text-shadow: X-Offset Y-Offset blur color; X-Offset:表示阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向左偏移; Y-Offset:是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移,反之向上偏移; Blur:是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0; Color:是指阴影的颜色,其可以使用rgba色。 比如,我们可以用下面代码实现设置阴影效果。 text-shadow: 0 1px 1px #fff
    查看全部
  • 嵌入字体@font-face @font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体。 语法: @font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; } 这样设置之后,就可以像使用普通字体一样在(font-*)中设置字体样式。 比如: p { font-size :12px; font-family : "My Font"; /*必须项,设置@font-face中font-family同样的值*/ }
    查看全部
  • transform-origin 改变元素的原点,默认情况下原点都是正中心,这个方法就可以改变元素的原点,如果原点被改变了,在使用skew函数对元素进行旋转,那么旋转的就会依据新的原点来旋转
    查看全部
  • matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵,用来指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素,此属性值使用涉及到数学中的矩阵,我在这里只是简单的说一下CSS3中的transform有这么一个属性值,如果需要深入了解,需要对数学矩阵有一定的知识。
    查看全部

举报

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

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